效果图

image.png

关于OnPopulateMesh

当一个UI元素生成顶点数据时，会调用OnPopulateMesh(VertexHelper vh)函数，我们可以覆写这个函数，来达到修改顶点数据或获取顶点数据。
其中用到的方法：

思路：

1. 清空所有顶点信息

2. 添加4个顶点(0, 1, 2, 3)

   
   
   image.png

3. 添加三角形 (0, 1, 2), (0, 2, 3), (0, 3, 1)

   
   
   image.png

源码

using UnityEngine;
using UnityEngine.UI;

public class UIPropWidget : Graphic
{
    /// <summary>
    /// 放大倍数
    /// </summary>
    public int Mul = 100;

    /// <summary>
    /// 旋转值
    /// </summary>
    public float Angle = 0;

    /// <summary>
    /// 顶点值
    /// </summary>
    [Range(0, 1)]
    public float[] Values;

    /// <summary>
    /// 记录顶点
    /// </summary>
    private Vector2[] m_Verts;

    /// <summary>
    /// 顶点数
    /// </summary>
    private int m_Length;

    protected override void Awake()
    {
        base.Awake();
        Values = new float[0];
        m_Verts = new Vector2[0];
    }

    private void Update()
    {
        if(Values.Length != m_Length) {
            m_Length = Values.Length;
            m_Verts = new Vector2[m_Length];
        }
        var cur_pos = Vector2.zero;
        var ave_angle = 360 / m_Length;
        
        for (int i = 0; i < m_Length; i++) {
            float scale = 1;
            if (Values.Length >= i) {
                scale = Values[i];
            }
            var radian = (ave_angle * i + Angle) * Mathf.PI / 180;
            var x = Mathf.Sin(radian) * scale * Mul;
            var y = Mathf.Cos(radian) * scale * Mul;
            m_Verts[i] = new Vector2(cur_pos.x + x, cur_pos.y + y);
        }
        SetVerticesDirty();
    }
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        vh.AddVert(Vector2.zero, color, Vector2.zero);
        foreach (var pos in m_Verts) {
            vh.AddVert(pos, color, Vector2.zero);
        }
        for (int i = 1; i <= m_Length; i++) {
            var num = i + 1 > m_Length ? 1 : i + 1;
            vh.AddTriangle(0, i, num);
        }
    }
}