Unity利用UGUI繪製多邊形實現屬性圖

遊戲開發中，角色具備有多種屬性，一般呈現成一個如下圖的多邊形屬性圖。

一、效果圖

二、展示效果

可以調整邊數，調整每個點的數值。

三、實現原理

查看UGUI的代碼可以得知，繪製ui圖的方法其實是繪製mesh，然後對其進行填充。正常一個Image圖片，繪製有四個頂點。

爲了實現多邊形，繼承於MaskableGraphic，重寫OnPopulateMesh，重新繪製頂點。

四、放上代碼

//多邊形繪製
using UnityEngine;
using UnityEngine.UI;

public class MyUIPolygon : MaskableGraphic
{
    public bool fill = true;
    public float thickness = 5;
    [Range(3, 360)]
    public int sides = 3;
    [Range(0, 360)]
    public float rotation = 0;
    [Range(0, 1)]
    public float[] VerticesDistances = new float[3];
    private float size = 0;

    public void DrawPolygon(int _sides)
    {
        sides = _sides;
        VerticesDistances = new float[_sides + 1];
        for (int i = 0; i < _sides; i++) VerticesDistances[i] = 1; ;
        rotation = 0;
    }
    public void DrawPolygon(int _sides, float[] _VerticesDistances)
    {
        sides = _sides;
        VerticesDistances = _VerticesDistances;
        rotation = 0;
    }
    public void DrawPolygon(int _sides, float[] _VerticesDistances, float _rotation)
    {
        sides = _sides;
        VerticesDistances = _VerticesDistances;
        rotation = _rotation;
    }
    void Update()
    {
        size = rectTransform.rect.width;
        if (rectTransform.rect.width > rectTransform.rect.height)
            size = rectTransform.rect.height;
        else
            size = rectTransform.rect.width;
        thickness = (float)Mathf.Clamp(thickness, 0, size / 2);
    }

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

        Vector2 prevX = Vector2.zero;
        Vector2 prevY = Vector2.zero;
        Vector2 uv0 = new Vector2(0, 0);
        Vector2 uv1 = new Vector2(0, 1);
        Vector2 uv2 = new Vector2(1, 1);
        Vector2 uv3 = new Vector2(1, 0);
        Vector2 pos0;
        Vector2 pos1;
        Vector2 pos2;
        Vector2 pos3;
        float degrees = 360f / sides;
        int vertices = sides + 1;
        if (VerticesDistances.Length != vertices)
        {
            VerticesDistances = new float[vertices];
            for (int i = 0; i < vertices - 1; i++) VerticesDistances[i] = 1;
        }
        // last vertex is also the first!
        VerticesDistances[vertices - 1] = VerticesDistances[0];
        for (int i = 0; i < vertices; i++)
        {
            float outer = -rectTransform.pivot.x * size * VerticesDistances[i];
            float inner = -rectTransform.pivot.x * size * VerticesDistances[i] + thickness;
            float rad = Mathf.Deg2Rad * (i * degrees + rotation);
            float c = Mathf.Cos(rad);
            float s = Mathf.Sin(rad);
            uv0 = new Vector2(0, 1);
            uv1 = new Vector2(1, 1);
            uv2 = new Vector2(1, 0);
            uv3 = new Vector2(0, 0);
            pos0 = prevX;
            pos1 = new Vector2(outer * c, outer * s);
            if (fill)
            {
                pos2 = Vector2.zero;
                pos3 = Vector2.zero;
            }
            else
            {
                pos2 = new Vector2(inner * c, inner * s);
                pos3 = prevY;
            }
            prevX = pos1;
            prevY = pos2;
            SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 });
            vh.AddUIVertexQuad(vbo);
        }
    }
    private UIVertex[] vbo = new UIVertex[4];
    private void SetVbo(Vector2[] vertices, Vector2[] uvs)
    {
        for (int i = 0; i < vertices.Length; i++)
        {
            var vert = UIVertex.simpleVert;
            vert.color = color;
            vert.position = vertices[i];
            vert.uv0 = uvs[i];
            vbo[i] = vert;
        }
    }
}

代碼來自UnityUIExtensions，做了一些修改，不依賴其他擴展基類腳本，裏面還有其他比較實用的UI擴展代碼，以後會逐一介紹。