Unity_UGUI实现圆形按钮的底层实现

在使用Unity的UGUI过程中，我们通常会遇到一种需求就是会，创建一个圆形的按钮或者图标。

先说说正常实现这么一个圆形组件的步骤：

1、创建Image组件Img1，作为父组件
2、在父组件下面创建子Image组件Img2，
3、在Img1中添加Mask（Script）组件，然后给父组件赋一个图片

这个图片的周围是透明的，中间是圆形的纯色填充，用来做父组件的image
4、然后我们给子组件img2赋上我们需要显示的图片

最终父组件中Mask组件会帮我们做遮挡，然后将子组件img2显示成圆形：

这样我们的一个圆形的图标就简单的显示出来。

但是这种方法有一个很明显的缺点就是：Mask组件，这个组件会增加一次drawcall，也就是我们的绘制压力。所以这不是我们最优的解决方案。

图片渲染到屏幕的底层过程大致如下：

首先获取图形的顶点信息，然后将这些顶点信息传给GPU缓存
然后，经过我们的顶点着色器，几何着色器，片元着色器，最后经过混合测试，然后再输出到我们的屏幕上。

因为在第一种方法里面我们使用了Mask遮罩，所以就需要先把遮罩图片画一遍，再画我们需要的图片。

那如果我们直接画一个圆形的图片，岂不是就可以省去Mask遮罩带来的多余的drawcall。

下面就是我们自己控制渲染过程，将图片只画一个圆形的部分：

1、圆形在绘制过程中的组成

我们将一个圆形的图片放大，就可以看见其实圆形显示其实并不是圆滑的，其实在绘制的过程中圆形的显示其实都是由一个个三角形拼接而成ÿ