UGUI雷达图

转自：https://blog.youkuaiyun.com/jk823394954/article/details/53876546

雷达图的实现主要是通过函数OnPopulateMesh，关于函数OnPopulateMesh的用法在上一节中介绍的很清楚了。

先看一下效果图

我们有五个属性攻击，防御，闪避，穿透，治疗。

雷达图的制作思路是：

首先我们放五个Text控件，控件上写上对应属性的名字，然后把控件的位置移动到你想要的雷达图形状的位置。

我们在OnPopulateMesh函数中设置五个顶点，这五个顶点的信息对应五个属性的信息，然后分别绘制三角形，最终组成最后的雷达图。

要绘制三角形，首先要知道三角形顶点的位置,怎么获取攻击顶点的位置呢？

拿攻击来举例，我们获取首先攻击值得上限，假设是100，然后获取当前攻击值，假如是70，我们算出一个比例是0.7。我们用攻击控件的anchoredPosition * 0.7就是攻击顶点的位置，其余属性的位置类似计算。

代码：

public class RadarChart : Graphic
{
    public RectTransform[] maxPoints;
    //分别为攻击，防御，闪避，穿透，治疗数值的上限
    private float[] maxValue = new float[5] { 100, 100, 100, 100, 100 };
    //分别为攻击，防御，闪避，穿透，治疗当前数值
    private float[] values = new float[5];
    private Vector3[] vertexes = new Vector3[5];
    private bool isDirty = true;
 
    void Start() {
        UpdateDate(70,60,80,50,80);
    }
    /// <summary>
    /// 
    /// </summary>
    /// <param name="attackPercent">攻击</param>
    /// <param name="defensePercent">防御</param>
    /// <param name="parryPercent">闪避</param>
    /// <param name="penetratePercent">穿透</param>
    /// <param name="curePerfent">治疗</param>
    public void UpdateDate(float attack,float defense,float parry, float penetrate,float cure) {
        values[0] = attack;
        values[1] = defense;
        values[2] = parry;
        values[3] = penetrate;
        values[4] = cure;
        refresh();
    }
 
    public void refresh()
    {
        for (int i = 0; i < maxPoints.Length; i++)
        {
            float percent = values[i] / maxValue[i];
            vertexes[i] = maxPoints[i].anchoredPosition * percent;
            Debug.Log("i "+i+" "+ maxPoints[i].anchoredPosition);
        }
        SetAllDirty();
    }
 
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        vh.AddVert(vertexes[0], Color.red, Vector2.zero);
        vh.AddVert(vertexes[1], Color.black, Vector2.zero);
        vh.AddVert(vertexes[2], Color.yellow, Vector2.zero);
        vh.AddVert(vertexes[3], Color.blue, Vector2.zero);
        vh.AddVert(vertexes[4], Color.green, Vector2.zero);
 
         vh.AddTriangle(0, 1, 2);
         vh.AddTriangle(0, 2, 3);
         vh.AddTriangle(0, 3, 4);
    }
}