寫在前面
全文解析圓形Image組件的實現(xiàn)原理，取關(guān)鍵代碼介紹算法細節(jié)，源碼已經(jīng)上傳Github下載地址，歡迎下載試用。
一、Unity原生Image組件實現(xiàn)圓形圖片的缺陷
Mask渲染消耗
許多游戲項目里免不了有很多圖片是以圓形形式展示的，如頭像，技能Icon等，一般做法是使用Image組件，再加上一個圓形的Mask。實現(xiàn)非常簡單，但因為影響效率，許多關(guān)于ui方面的Unity效率優(yōu)化文章，都會建議開發(fā)者少用Mask。
使用Mask會額外消耗多一個Drawcall來創(chuàng)建Mask，做像素剔除。
Mask不利于層級合并。原本同一圖集里的ui可以合并層級，僅需一個Drawcall渲染，如果加入Mask，就會將一個ui整體分割成了Mask下的子ui與其他ui，兩者只能各自進行層級合并，至少要兩個Drawcall。Mask用得多了，一個ui整體會被分割得四分五裂，就會嚴重影響層次合并的效率了。
無法精確點擊
Image+Mask的實現(xiàn)的圓形，點擊判斷不精確，點擊到圓形外的四個邊角仍會觸發(fā)點擊，雖然可以通過另外設(shè)置eventAlphaThreshold實現(xiàn)像素級判斷，但這個方法有天生缺陷，并不是好的選擇。
二、應運而生的CircleImage組件
了解了原有做法的缺陷后，我們希望自制圓形Image組件，解決這些問題，并且盡量簡單易用。
