- 今天我们使用UGUI来实现这样一个雷达图
雷达.gif
简单说下思路
主要是通过自己定义顶点的位置来实现绘制多边形。那怎么自定义顶点呢，我们可以找到Text或Image等UI的基类Graphic。里面有OnPopulateMesh(VertexHelper vh) 方法。我们可以通过重写这个方法来实现绘制。先简单的画个正方形
- 可以看到方法里有VertexHelper vh这个参数。我们需要向这个参数添加两个东西，
第一个当然是添加顶点：vh.AddVert(vector3, Color.blue, Vector2.zero);
第二个是添加三角形 vh.AddTriangle(0, 1, 2);
这里的0，1，2指什么呢，指顶点的序号，第一个添加进去的是0.第二个添加进去的是1。我们按3个为一组添加三角形，用顺时针的方向 - 接下来，新建一个脚本，正式画正方形
public class SimpleGraphic : Graphic
{
protected override void OnPopulateMesh(VertexHelper vh)
{
vh.Clear();
//添加顶点
AddVert(vh, 0, 0); // 0：左下角
AddVert(vh, 0, 100); // 1： 左上角
AddVert(vh, 100, 100); // 2： 右上角
AddVert(vh, 100, 0); // 3：右下角
//三角形
vh.AddTriangle(0, 1, 2);
vh.AddTriangle(2, 3, 0);
}
//简单封装
void AddVert(VertexHelper vh, float x, float y)
{
Vector3 vector3 = new Vector3(x, y);
vh.AddVert(vector3, Color.blue, Vector2.zero);//添加顶点关键代码
}
}
-
然后在场景里新建一个GameObject，挂上该脚本。GameObject要位于Canvas如下，如下图。可以看到正方形出来了
正方形.png
OK，接下来我们正式画雷达图。先上代码
public class Radar : Graphic
{
//点的个数
[Range(3, 12)] public int pointCount = 5;
//边长的一半
public float LenSize = 100;
//每一条边的比例
public float[] ratioArray = new float[]{1,1,1,1,1};
private void Update()
{
//取宽高最小的一边作为边长。
LenSize = Mathf.Min(rectTransform.rect.width,rectTransform.rect.height)/2;
}
//设置每条边的比例
public void SetRatio(float[] ratioArray)
{
this.ratioArray = ratioArray;
SetAllDirty();
}
//设置每条边的比例
public void SetRatio(List ratioList)
{
this.ratioArray = ratioList.ToArray();
SetAllDirty();
}
protected override void OnPopulateMesh(VertexHelper vh)
{
Draw(vh);
}
void Draw(VertexHelper vh)
{
AddVert(vh); //添加顶点
AddTriangle(vh);//添加三角形
}
//添加顶点
void AddVert(VertexHelper vh)
{
vh.Clear();
//根据边数算出每个角的弧度
float baseRad = 2 * Mathf.PI / pointCount;
//根据弧度算出每个点的坐标
for (int i = 0; i < pointCount; i++)
{
float rad = baseRad * i;
float x = LenSize * Mathf.Sin(rad);
float y = LenSize * Mathf.Cos(rad);
Vector3 pos = new Vector2(x, y);
//接收外界传入每条边的比例。乘以该比例。一般是（0~1）
if (i < ratioArray.Length)
{
pos *= ratioArray[i];
}
vh.AddVert(pos, Color.blue, Vector2.zero);
}
}
//添加三角形
void AddTriangle(VertexHelper vh)
{
int count = pointCount;
int curIndex = 1;
for (int j = 0; j < count - 2 ; j++)
{
vh.AddTriangle(0,curIndex, curIndex + 1);
curIndex++;
}
}
//另外一种添加三角形的方法
private void AddTriangle2(VertexHelper vh)
{
for (int i = 0; i < pointCount-1; i++)
{
vh.AddTriangle(0,i,i+1);
}
}
}
- 方法里主要还是完成了 添加顶点和添加三角形 两个操作，注释基本附在代码里了。可以看到我们留了SetRatio(List
list)接口，可以供外面设置每条边的比例。 - 接下来我们开始测试一下
- 先隐藏掉我们开始画正方形的GameObject。
接下来新建ImgBg: 放雷达背景图
新建Radar: 挂载我们新写的Radar脚本
新建Test: 挂载接下来的 RadarTest 脚本, 并把Radar拖给自己
层级如下图
Canvas层级.png
- 新建RadarTest脚本
public class RadarTest : MonoBehaviour
{
public Radar _radar;
void Update()
{
if (Input.GetMouseButton(0))
{
List testList = new List();
for (int i = 0; i < 5; i++)
{
testList.Add(Random.Range(0f,1f));
}
_radar.SetRatio(testList);
}
}
}
测试脚本很简单。每按住鼠标，随机5个点并传给Radar绘制图形。实际运用时，可以传入具体数据。
好了，这次就介绍到这里~
嘿，看完是不是有一种直接在Scene窗口调节顶点的冲动。
传送门：UGUI雷达图《二》