Unity雷达图制作

Unity雷达图制作

• • 找到RawImage
  • 雷达图的实现

找到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.写入分值，就可以看到一个五边形诞生啦

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