UGUI制作圆形UI

源代码

使用Mask来制作

创建两个具有父子关系的Image，父物体添加Mask组件，精灵是一个圆形的遮罩，子物体是要显示的图片。

这样做有两个坏处：
1.圆形UI的锯齿感非常强烈
2.增加了Draw Call

重写Image组件的OnPopulateMesh方法来实现

我们通过自己计算圆形UI的顶点来实现圆形UI的绘制。当然，这个圆形是通过大量的三角片拼接而成。
toFill就是要绘制这个图形所需要的顶点数据。

    /// <summary>
    /// 圆形由多少个三角块拼成
    /// </summary> 
    [SerializeField]
    private int segements = 100;
    /// <summary>
    /// 显示出来的百分比
    /// </summary>
    [SerializeField]
    private float percent = 1;
    private List<Vector2> _vertexList = new List<Vector2>();
    protected override void OnPopulateMesh(VertexHelper toFill)
    {
   
        toFill.Clear();
        AddVertex(toFill);

        for(int i = 1; i <= segements; i++)
        {
   
            toFill.AddTriangle(i, 0, i + 1);
        }
    }

我们通过AddVertex来想toFill中添加顶点数据，再通过AddTriangle来进行三角形的绘制。

    private void AddVertex(VertexHelper toFill)
    {
   
        //获得Rect长宽和需要显示为亮的三角片的数量
        float width = rectTransform.rect.width;
        float height = rectTransform.rect.height;
        int whiteSegement = (int)(segements * percent);

        //计算原点的uv和uv与长宽的换算关系
        Vector4 uv = overrideSprite != null ? DataUtility.GetOuterUV(overrideSprite