[UGUI]圆形Image

参考链接：

http://www.cnblogs.com/leoin2012/p/6425089.html

前面说过Mask组件会影响性能：https://www.cnblogs.com/lyh916/p/10587632.html

因此，尽量少使用Mask，对于类似技能图标那样的圆形图片，可以考虑用本文的方式去实现。

1.CircleImage.cs

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Sprites;
using System.Collections.Generic;

public class CircleImage : Image {

    public float fillPercent = 1f;       //填充比例
    public int fillNum = 100;            //填充个数
    private List<Vector2> outerVertexs;  //圆上顶点列表

    protected override void Awake()
    {
        base.Awake();
        outerVertexs = new List<Vector2>();
    }

    protected override void OnPopulateMesh(VertexHelper toFill)
    {
        if (overrideSprite == null)
        {
            base.OnPopulateMesh(toFill);
            return;
        }

        switch (type)
        {
            case Type.Simple:
                GenerateSimpleSprite(toFill, preserveAspect);
                break;
        }
    }

    void GenerateSimpleSprite(VertexHelper vh, bool lPreserveAspect)
    {
        vh.Clear();
        outerVertexs.Clear();

        //计算准备
        Vector4 uv = (overrideSprite != null) ? DataUtility.GetOuterUV(overrideSprite) : Vector4.zero;

        float degreeDelta = 2 * Mathf.PI / fillNum;
        int curNum = (int)(fillNum * fillPercent);
        float width = rectTransform.rect.width;
        float height = rectTransform.rect.height;
        float radius = width * 0.5f;

        float uvCenterX = (uv.x + uv.z) * 0.5f;
        float uvCenterY = (uv.y + uv.w) * 0.5f;
        float uvScaleX = (uv.z - uv.x) / width;
        float uvScaleY = (uv.w - uv.y) / height;

        //添加第一个点
        UIVertex uiVertex = new UIVertex();
        uiVertex.color = color;
        uiVertex.position = Vector2.zero;
        uiVertex.uv0 = new Vector2(uvCenterX, uvCenterY);
        vh.AddVert(uiVertex);

        //添加圆上的点
        int vertNum = (fillPercent == 1) ? curNum : curNum + 1;
        for (int i = 1; i <= vertNum; i++)
        {
            float curDegree = (i - 1) * degreeDelta;
            float cosA = Mathf.Cos(curDegree);
            float sinA = Mathf.Sin(curDegree);
            Vector2 curVertice = new Vector2(cosA * radius, sinA * radius);

            uiVertex = new UIVertex();
            uiVertex.color = color;
            uiVertex.position = curVertice;
            uiVertex.uv0 = new Vector2(uvCenterX + curVertice.x * uvScaleX, uvCenterY + curVertice.y * uvScaleY);
            vh.AddVert(uiVertex);

            outerVertexs.Add(curVertice);
        }

        //连接点
        for (int i = 1; i < vertNum; i++)
        {
            vh.AddTriangle(0, i + 1, i);
        }
        if (fillPercent == 1)
        {
            vh.AddTriangle(0, 1, curNum);
        }

        //连接点击区域
        if (fillPercent < 1)
        {
            outerVertexs.Add(Vector2.zero);
        }
    }

    public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
    {
        Sprite sprite = overrideSprite;
        if (sprite == null)
            return true;

        Vector2 local;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, screenPoint, eventCamera, out local);

        return MathTool.IsPointInPolygon(local, outerVertexs);
    }
}

效果如下：

分析：

a.顶点数据

这里以pivot为(0.5,0.5)为例。在这种情况下，图片的位置中心和uv中心重合，即都在图片的中点处。因此这时位置和uv是成比例的，即uv.z - uv.x对应width，uv.w - uv.y对应height，这样就可以根据当前点的位置计算出对应的uv坐标。

关于圆上的顶点个数，当填充比例小于1时，顶点个数=三角形个数+1；当填充比例等于1时，顶点个数=三角形个数(因为点重合)

b.顶点连接

要按顺时针连接(顺时针表示正对屏幕，逆时针表示背对屏幕)。这里使用(0, i + 1, i)的顺序。

c.点击区域

使用这个算法：https://www.cnblogs.com/lyh916/p/10633132.html

要注意的是，当填充比例小于1时，要把原点也加上去，可以考虑一下下面的情况：

2.CircleImageEditor.cs

using UnityEditor;
using UnityEditor.UI;

[CustomEditor(typeof(CircleImage))]
public class CircleImageEditor : ImageEditor {

    SerializedProperty fillPercent;
    SerializedProperty fillNum;

    protected override void OnEnable()
    {
        base.OnEnable();
        fillPercent = serializedObject.FindProperty("fillPercent");
        fillNum = serializedObject.FindProperty("fillNum");
    }

    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();

        serializedObject.Update();

        fillPercent.floatValue = EditorGUILayout.Slider("填充比例", fillPercent.floatValue, 0, 1);
        fillNum.intValue = EditorGUILayout.IntSlider("填充个数", fillNum.intValue, 1, 100);

        serializedObject.ApplyModifiedProperties();
    }
}