UGUI案例篇第(二)节：UGUI实现圆形Image的方式(Unity官方解决方案）

绘制圆形Image的原理

   相信大家在制作UIButton或者是UI头像的时候常常想用到使用 圆形 的比较美观好看，但是呢，Unity默认的UIImage都是矩形的，那么如何做一个圆形的
   Button或者是圆形的UI头像呢？

---

Unity官方给出的解决方案：
创建一个Image父物体，父物体的Sprite使用圆形图片(图片有一定的格式，下面演示)，之后父物体挂载Mask组件，然后在父物体下创建要绘制成圆形的Image子物体即可。

下面演示Gif:

---

---

(1) 案例演示绘制圆形Image

步骤1 ：创建Image父物体，命名为MaskParent，之后使用圆形Sprite(矩形图片的底应该是以灰白拼接的格格，之后绘制的圆形)，接着为父物体MaskParent添加Mask组件。演示请看图 1-1

                                                                                  图1-1

步骤2 ： 然后在父物体下创建要绘制成圆形的Image子物体，赋予子物体要绘制成圆形的Sprite，之后适配父物体大小即可。
请看图1-2：

                                                                                      图1-2

---

案例素材：

(2) Unity官方解决方案绘制圆形Image存在的弊端（必看）

                            使用Mask会额外消耗多一个Drawcall来创建Mask，做像素剔除。 请看: 图1-3 和1-4

                                                             图1-3

                                                        图1-4

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

---

---

---

(3) 丢弃Mask遮罩，更好的CircleImage组件(手动编写的=。=)完成圆形Image的显示。

链接如下：

UGUI案例篇第(二)节拓展篇：实现圆形Image的方式(编写CircleImage组件，比Mask更高效好用）

                                ------------我是有底线的--------------
                                感谢能够观看博客的各位Unity开发爱好者们，有问题发表评论呐，*★,°*:.☆(￣▽￣)/$:*.°★* 。