Unity绘制圆和缓动雷达图
之前在做UI模块的时候遇到过需要做雷达图的效果，所以简单复习了一下
关于网格绘制
我们都知道Unity绘制图形是通过Mesh网格添加顶点进行绘制，那么知道顶点信息后如何实现图形的绘制，就是由Graphic类来帮助我们实现。因此我们需要自定义一个类继承Graphic，然后重写其OnPopulateMesh方法，将其挂载到UI物体上。
public class RadarMap : Graphic
{
protected override void OnPopulateMesh(VertexHelper vh)
{
}
}
注：若想要支持RectMask2D功能，则改为继承MaskableGraphic即可
在OnPopulateMesh方法中提供了VertexHelper参数，这是Unity的顶点辅助类，通过它我们可以轻松实现添加顶点和绘制等操作了。
添加顶点
//参数是顶点坐标，颜色以及uv坐标
new VertexHelper().AddVert(Vector3 position, Color32 color, Vector2 uv0)
顶点的绘制
new VertexHelper().AddTriangle(int idx0, int idx1, int idx2);
绘制圆
对于Unity中的网格，我们只能通过一个个三角形拼接成不同的形状，包括Unity本身的物体网格也是如此，因此，画圆可以通过弧度和半径，以及圆的边长去绘制多个三角形，拼接而成一个圆
这是对画圆的一些总结
画圆的代码如下：
using UnityEngine;
using UnityEngine.UI;
public class RadarMap : Graphic
{
public Texture2D texture;
public Color _color = Color.white;
public int n;
public float r;
public override Texture mainTexture//赋值UI图片
{
get
{
if (texture != null)
{
return texture;//如果有外部精灵则返回外部精灵的texture
}
if (material != null && material.mainTexture != null)
{
return material.mainTexture;//如果有材质则返回材质上的texture
}
return s_WhiteTexture;//什么都没有的情况返回默认的texture
}
}
protected override void OnPopulateMesh(VertexHelper vh)
{
Rect rect = rectTransform.rect;
r = rect.width < rect.height ? rect.width / 2 : rect.height / 2;//取当前最小的宽或高，取一半获得半径
if (n >= 3)
{
vh.Clear();
vh.AddVert(Vector3.zero, color, new Vector2(0.5f, 0.5f));//添加圆心点
float ang = 2 * Mathf.PI / n;
for (int i = 0; i < n; i++)
{
float x = Mathf.Sin(i * ang) * r;
float y = Mathf.Cos(i * ang) * r;
float uvx = (x + r) / (2 * r);//通过圆上点+半径/直径求出uv坐标
float uvy = (y + r) / (2 * r);
vh.AddVert(new Vector3(x, y, 0), color, new Vector3(uvx, uvy));//添加顶点
if (i == 0)
{
vh.AddTriangle(0, n, 1);//第一次绘制最后一部分
}
else
{
vh.AddTriangle(0, i, i + 1);//依次绘制
}
}
}
}
}
画出圆的效果
绘制雷达图
根据绘制圆我们可以发现，绘制雷达图是同理的，同样是添加一个圆心点并根据半径和弧度求出圆上的顶点，只是雷达图每个顶点的位置都跟雷达图中的数值有关。因此，我们只需要添加一个数组，并将画圆的代码稍作修改就可以了
以下是雷达图的绘制代码：
using UnityEngine;
using UnityEngine.UI;
public class RadarMap : Graphic
{
public Texture2D texture;
public Color _color = Color.white;
public float[] arr = new float[0];
public float r;
public override Texture mainTexture
{
get
{
if (texture != null)
{
return texture;//如果有外部精灵则返回外部精灵的texture
}
if (material != null && material.mainTexture != null)
{
return material.mainTexture;//如果有材质则返回材质上的texture
}
return s_WhiteTexture;//什么都没有的情况返回默认的texture
}
}
//生成无背景雷达图 这里的生成方法和生成圆的方法是一致的
protected override void OnPopulateMesh(VertexHelper vh)
{
Rect rect = rectTransform.rect;
int n = arr.Length;
//取当前最小的宽或高，取一半获得半径
r = rect.width < rect.height ? rect.width / 2 : rect.height / 2;
if (n >= 3)
{
vh.Clear();
//添加圆心点
vh.AddVert(Vector3.zero, color, new Vector2(0.5f, 0.5f));
float ang = 2 * Mathf.PI / n;
for (int i = 0; i < n; i++)
{
//通过数组中数据的值为雷达图赋值，最大值为半径
float x = Mathf.Sin(i * ang) * (arr[i] < r ? arr[i] : r);
float y = Mathf.Cos(i * ang) * (arr[i] < r ? arr[i] : r);
//通过圆上点+半径/直径求出uv坐标
float uvx = (x + r) / (2 * r);
float uvy = (y + r) / (2 * r);
//添加顶点
vh.AddVert(new Vector3(x, y, 0), color, new Vector3(uvx, uvy));
if (i == 0)
{
//第一次绘制最后一部分
vh.AddTriangle(0, n, 1);
}
else
{
//依次绘制
vh.AddTriangle(0, i, i + 1);
}
}
}
}
}
最后的效果如下
缓动则通过Mathf.Lerp的差值函数实现，也可以直接使用公式( max - min ) * p + min
代码如下：
//缓动代码块，这里的数组和集合已经赋值过
public RadarMap radarMap;
bool isDrow = false;
List<float> arr = new List<float>();
float[] arry;
float MaxTime = 3f;//缓动最大时间
float nowTime = 0f;//缓动开始时间
private void Update()
{
if (isDrow)
{
nowTime += Time.deltaTime;
for (int i = 0; i < arr.Count; i++)
{
//差值函数，始终在当前点和目标点中间取一个参数
arry[i] = Mathf.Lerp(0, arr[i], nowTime / MaxTime);
//当达到了这个值以后，循环结束，清空缓存原始数据的集合
if (i == arr.Count - 1 && arr[i] - arry[i] <= 0.1f)
{
Mathf.Round(arry[i]);
arr.Clear();
isDrow = false;
nowTime = 0f;
}
}
//清除脏数据
radarMap.SetAllDirty();
//将每次算出的差值赋给RadarMap
radarMap.arr = arry;
}
}