写在前面

全文解析圆形Image组件的实现原理，取关键代码介绍算法细节，源码已经上传Github下载地址，欢迎下载试用。

一、Unity原生Image组件实现圆形图片的缺陷

Mask渲染消耗

许多游戏项目里免不了有很多图片是以圆形形式展示的，如头像，技能Icon等，一般做法是使用Image组件，再加上一个圆形的Mask。实现非常简单，但因为影响效率，许多关于ui方面的Unity效率优化文章，都会建议开发者少用Mask。

  1. 使用Mask会额外消耗多一个Drawcall来创建Mask，做像素剔除。

  2. Mask不利于层级合并。原本同一图集里的ui可以合并层级，仅需一个Drawcall渲染，如果加入Mask，就会将一个ui整体分割成了Mask下的子ui与其他ui，两者只能各自进行层级合并，至少要两个Drawcall。Mask用得多了，一个ui整体会被分割得四分五裂，就会严重影响层次合并的效率了。

无法精确点击

Image+Mask的实现的圆形，点击判断不精确，点击到圆形外的四个边角仍会触发点击，虽然可以通过另外设置eventAlphaThreshold实现像素级判断，但这个方法有天生缺陷，并不是好的选择。

二、应运而生的CircleImage组件

了解了原有做法的缺陷后，我们希望自制圆形Image组件，解决这些问题，并且尽量简单易用。

网友评论