轮转图一般为正五边形,绘制正五边形
第一步
设置存储结点的数组 初始精灵图片 脚本需要继承 MaskableGraphic
public float[] arr; // 存储雷达图每个数据点的值的数组
public Sprite activeSprite; // 当前激活的精灵图
第二步
对精灵进行判断是否存在,存在直接返回
这个方法通常在渲染过程中用于获取要应用的材质或纹理,并将其应用于对象的渲染器
public override Texture mainTexture
{
get
{
if (activeSprite == null)
{
if (material != null && material.mainTexture != null)
{
return material.mainTexture;
}
return s_WhiteTexture;
}
return activeSprite.texture;
}
}
第三步
重写父类的方法,用于生成雷达图的网格
protected override void OnPopulateMesh(VertexHelper vh)
{
if (arr.Length < 3) // 如果数据点数量小于3个,则返回默认的网格
{
base.OnPopulateMesh(vh);
return;
}
vh.Clear(); // 清空当前的顶点信息
float w = rectTransform.sizeDelta.x; // 获取雷达图的宽度
float h = rectTransform.sizeDelta.y; // 获取雷达图的高度
float max = arr.Max();
float p = w < h ?( w/2) / max : (h/2) / max;
float ang = 2 * Mathf.PI / arr.Length; // 计算每个数据点之间的角度
vh.AddVert(Vector3.zero, color, new Vector2(0.5f, 0.5f)); // 添加中心点的顶点
for (int i = 0; i < arr.Length; i++)
{
float x = Mathf.Sin(i * ang) * arr[i]*p; // 计算当前顶点的x坐标,根据正弦函数计算出来
float y = Mathf.Cos(i * ang) * arr[i]*p; // 计算当前顶点的y坐标,根据余弦函数计算出来
float uvx = (x + w / 2) / w; // 计算当前顶点在纹理坐标的x分量
float uvy = (y + h / 2) / h; // 计算当前顶点在纹理坐标的y分量
vh.AddVert(new Vector3(x, y, 0), color, new Vector2(uvx, uvy)); // 添加当前顶点的位置和纹理坐标
// 添加三角形,根据当前顶点的索引添加,如果是第一个顶点则连接中心点和第一个数据点,否则连接当前顶点和前一个顶点
if (i == 0)
{
vh.AddTriangle(0, arr.Length, 1);
}
else
{
vh.AddTriangle(0, i, i + 1);
}
}
}
1.此脚本挂载到空ui上,设置一个image
2.将此组件删除或取消
3.设置精灵和数组