该代码为结合网络资料整理,以及稍做修改而来,其中的知识点在此不做阐释。
需求:
雷达多边形为纯色(如果要指定图片,需要修改源码,继承image组件,并且修改uv坐标等)
使用方式:
- 选择一个空UI gameobject挂载该组件(中心点为多边形的中心点)。
- 该UIgo下新建n个子物体UI go(可以是text,也可以是image,或者空),n为多边形的变数。然后按照逆时针排序。拖拽赋值points,确定顶点的坐标。子物体的中心点即是多边形的(最大)顶点坐标。
- 最终显示多边形的顶点与最大顶点的距离百分比,即当前数据与最大值的百分比。数据必须与逆时针排序的最大顶点一一对应。
- 其他模块调用该组件的OnDataUpdate方法,参数为数据百分比数组,与需要被显示的顶点逆时针排序一一对应。
using System;
using System.Collections.Generic;
using UnityEngine.UI;
using UnityEngine;
//逆时针读取数据n个点的数据 , point 也应逆时针顺序赋值
//通过调用OnDataUpdate方法更改显示
public class RadarImage:Graphic
{
//顶点位置
private Vector3[] vertexes;
//拖拽赋值 , 该 recttransform的中心点为 顶点位置
public RectTransform[] points;
//数据变化时引起顶点数据变化,传入顶点数据的百分比
public void OnDataUpdate(float[] percents)
{
if(percents.Length != points.Length)
{
Debug.LogError("雷达图顶点数据不完整");
return;
}
if(vertexes == null)
vertexes = new Vector3[points.Length];
for (int i = 0; i < points.Length; i++)
{
float percent = percents[i];
vertexes[i] = points[i].anchoredPosition * percent;
}
Refresh();
}
//调用刷新则 刷新显示 雷达图, 应该在合适的时机调用
public void Refresh()
{
SetVerticesDirty();
}
protected override void OnPopulateMesh(VertexHelper vh)
{
vh.Clear();
//颜色为该组件上的纯色
foreach(var v in vertexes)
{
vh.AddVert(v, color, Vector2.zero);
}
for(int i = 1;i< points.Length - 1;i++)
{
vh.AddTriangle(0, i, i + 1);
}
}
}