Unity雷达图制作1

找到RawImage

这里呢我们可以看到它这个是继承了一个MaskableGraphc(MaskableGraphic是可遮罩的图像)
然后在下面呢重写了一个OnPopulateMesh函数(当一个UI元素生成顶点数据时会调用到函数，在这个函数中我们可以修改顶点的数据或者获取顶点的数据)
有了这两个我们就可以开始写代码了。

雷达图的实现

1.创建脚本MyImage
2.继承MaskableGraphc
3.重写OnPopulateMesh(VertexHelper vh)
4.直接上代码

using UnityEngine;
using UnityEngine.UI;

public class MyImage : MaskableGraphic
{
    //在这里我们写一个关于分数的雷达图
    public float maxScore=100;//最大分值
    public float[] scores;//分数集合(代表会有几个顶点)
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();//清空顶点数据
        float angle = 360f / scores.Length;//计算每个顶点之间的角度
        float r = GetPixelAdjustedRect().width / 2;//计算RectTransform的半径
        vh.AddVert(Vector2.zero, color, Vector2.one * 0.5f);//添加中心顶点
        
        for(int i=0;i<scores.Length;i++)
        {
            float rad = Mathf.Deg2Rad * angle * i;//计算每个顶点相对于y轴的弧度
            float value = scores[i] / maxScore;//计算每个分数所占总分数的比例
            value = value * r;//计算半径
            float x = Mathf.Sin(rad) * value;//计算顶点所在的x轴的位置
            float y = Mathf.Cos(rad) * value;//计算顶点所在的y轴的位置
            //计算uv坐标为贴图做准备，本文不做过多解释
            float u = Mathf.Sin(rad) *0.5f+0.5f;
            float v = Mathf.Cos(rad) *0.5f+0.5f;
            vh.AddVert(new Vector2(x, y), color, new Vector2(u, v));//添加节点
        }

        for(int i=1;i<scores.Length;i++)
        {
            vh.AddTriangle(0, i, i + 1);//构建三角形
        }
        vh.AddTriangle(0, scores.Length, 1);
    }
}

5.创建一个Image然后把原有的Image组件删掉，把刚刚写的代码添加上来

6.写入分值，就可以看到一个五边形诞生啦

这是博主的第一篇文章！有什么不对的地方大家多多包涵，后面会出怎么给这个图片添加贴图的一篇。