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);
    }
}






  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值