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.写入分值,就可以看到一个五边形诞生啦
这是博主的第一篇文章!有什么不对的地方大家多多包涵,后面会出怎么给这个图片添加贴图的一篇。