雷达图的定义:雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。
了解MaskableGraphic类:
MaskableGraphic,字面意思为可屏蔽的图形,继承自UI.Graphic,作用是绘制够被遮罩的Graphic。
创建空对象以及雷达图脚本,脚本继承MaskableGraphic类,通过重写OnPopulateMesh方法进行雷达图的制作:
protected override void OnPopulateMesh(VertexHelper vh)
{
if (arr.Length < 3)
{
base.OnPopulateMesh(vh);
return;
}
vh.Clear();
float ang = 2 * Mathf.PI / arr.Length;
float w = rectTransform.sizeDelta.x;
float h = rectTransform.sizeDelta.y;
float max = arr.Max();
float p = w < h ? (w / 2) / max : (h / 2) / max;
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;
float y = Mathf.Cos(i * ang) * arr[i] * p;
float uvx = (x + w / 2) / w;
float uvy = (y + h / 2) / h;
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);
}
}
}
也可以为雷达图添加描边效果:
//画描边
int next = arr.Length + 1;
for (int i = 0; i < arr.Length; i++)
{
float x0 = Mathf.Sin(i * ang) * (arr[i] * p - m);
float y0 = Mathf.Cos(i * ang) * (arr[i] * p - m);
float uvx0 = (x0 + w / 2) / w;
float uvy0 = (y0 + h / 2) / h;
vh.AddVert(new Vector3(x0, y0, 0), mcolor, new Vector2(uvx0, uvy0));
float x = Mathf.Sin(i * ang) * (arr[i] * p);
float y = Mathf.Cos(i * ang) * (arr[i] * p);
float uvx = (x + w / 2) / w;
float uvy = (y + h / 2) / h;
vh.AddVert(new Vector3(x, y, 0), mcolor, new Vector2(uvx, uvy));
if (i == arr.Length-1)
{
vh.AddTriangle(i * 2 + next, i * 2 + 1 + next, 1+next);
vh.AddTriangle(i * 2 + next, 1 + next, next);
}
else
{
vh.AddTriangle(i*2+next,i*2+1+next,(i+1)*2+1+next);
vh.AddTriangle(i * 2 + next, (i + 1) * 2 + 1 + next, (i + 1) * 2 + next);
}
}