UGUI雷达图

雷达图的实现主要是通过函数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);
    }
}






猜你喜欢

转载自blog.csdn.net/jk823394954/article/details/53876546