版权声明：本文为原创文章，转载请声明https://www.cnblogs.com/unityExplorer/p/13524824.html

使用UGUI进行游戏开发的过程中经常会遇到一个问题：玩家的头像在不同的界面或场景显示的形状可能不一样，有的地方需要显示成圆形，有些地方需要显示成方形

为了避免这种问题，我们选择殴打策划，恩。。。但是如果打策划打不过，美术小姐姐又不好意思打的话，怎么办？真出两套图，那不是一个精益求精的攻城狮乐意的看到的结果

有没有办法可以让同一张图可以显示成不同的形状呢？有的朋友说了，可以用UGUI的Mask来实现

这也是一种办法，但是这种办法有个弊端，就是遮罩图片尺寸很小的话，边缘锯齿会相当严重，这与UGUI中Mask的原理有关

所以有没有更好的办法呢？有的，我们先分析下UGUI图片的渲染原理

实际上，UGUI中的图片其实就是一个由两个三角面拼接成的平面模型

当场景中只有一张图片时，可以看到，Tris是2，Verts是4

基于此，将顶点围成的图形修改成圆形，那就实现了我们的目的

将n个三角形拼接到一起就是一个近似圆形的形状，比如：

实现代码如下：

public class CircleImage : Image  
{  
    public int segements = ;  
    public float fillPercent = ;

    protected override void OnPopulateMesh(VertexHelper vh)  
    {  
        vh.Clear();

        float tw = rectTransform.rect.width;  
        float th = rectTransform.rect.height;  
        float outerRadius = 0.5f \* Mathf.Min(tw, th);  
        float degreeDelta =  \* Mathf.PI / segements;  
        int curSegements = (int)(segements \* fillPercent);  

　　　　　　　　
　　　　　　　//因UGUI的锚点系统，这里需要考虑pivot的差值，以避免因物体原点的改变导致图片歪了
Vector2 pivotVector = new Vector2(tw * (0.5f - rectTransform.pivot.x), th * (0.5f - rectTransform.pivot.y));
Vector4 uv = overrideSprite != null ? DataUtility.GetOuterUV(overrideSprite) : Vector4.zero;
Vector2 center = new Vector2(uv.x + uv.z, uv.y + uv.w) * 0.5f;
float uvScaleX = (uv.z - uv.x) / tw;
float uvScaleY = (uv.w - uv.y) / th;

        float curDegree = ;  
        UIVertex uiVertex;  
        int verticeCount;  
        int triangleCount;  
        Vector2 curVertice;

        curVertice = Vector2.zero;  
        verticeCount = curSegements + ;  
        uiVertex = new UIVertex  
        {  
            color = color,  
            position = curVertice + pivotVector,  
            uv0 = new Vector2(curVertice.x \* uvScaleX, curVertice.y \* uvScaleY) + center  
        };  
        vh.AddVert(uiVertex);

        for (int i = ; i < verticeCount; i++)  
        {  
            curVertice = new Vector2(Mathf.Cos(curDegree) \* outerRadius, Mathf.Sin(curDegree) \* outerRadius);  
            curDegree += degreeDelta;

            uiVertex = new UIVertex  
            {  
                color = color,  
                position = curVertice + pivotVector,  
                uv0 = new Vector2(curVertice.x \* uvScaleX, curVertice.y \* uvScaleY) + center  
            };  
            vh.AddVert(uiVertex);  
        }

        triangleCount = curSegements \* ;  
        for (int i = , vIdx = ; i < triangleCount - ; i += , vIdx++)  
        {  
            vh.AddTriangle(vIdx, , vIdx + );  
        }  
        if (fillPercent == )  
        {  
            //首尾顶点相连  
            vh.AddTriangle(verticeCount - , , );  
        }  
    }  
}

将正中心的点作为图形顶点的起始点，按照逆时针或顺时针方向画三角形，最终再回到中心点，就形成了一个封闭的圆形

三角面的数量决定了圆形的圆滑程度，作为组件，我们可以将三角面的数量作为参数对外暴露

这个组件继承自UGUI的Image，所以也拥有Image的部分属性，事实上出于性能开销考虑，继承RawImage性价比会更高

但是RawImage有个一个问题，就是不兼容图集系统，也就是说，即使是打在图集中的图片，如果使用RawImage，内存会额外计算，综合考虑下，也只能这样了