Unity实战之一个脚本实现雷达图

前言

最近又接触到一个新名词——“雷达图”。还是第一次接触这个名词。所谓雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。 雷达图也称为网络图，蜘蛛图，星图，蜘蛛网图，不规则多边形，极坐标图或Kiviat图。它相当于平行坐标图，轴径向排列。
度娘一顿解释，听得脑子嗡嗡的，赶紧打开示意图一看，我草，原来是这玩意儿~

雷达图的重要性

在游戏中，一些游戏属性直接用文字展示的话，看上去不直观，以图片的方式展示会更加的形象。但是呢，这个图因人而异，
所以直接使用Image来代替会造成很多不必要的麻烦，并且，图片多了之后对内存的消耗也是可想而知。通常，这类属性图采用雷达图来实现

雷达图构成

那么，雷达图是由什么构成的呢？简单来说,雷达图是由顶点和边构成的多边形平面。所以，制作一个雷达图，我们首先要知道这个雷达图有几个顶点，在知道顶点数之后，我们由封闭图形的构成原理知道，边数+1 = 顶点数

C#代码

using UnityEngine.UI;
using UnityEngine;
using System.Collections.Generic;

/// <summary>
/// UI多边形
/// </summary>
public class UIPolygon : MaskableGraphic
{
    [SerializeField]
    Texture m_Texture;
    /// <summary>
    /// 填充
    /// </summary>
    public bool fill = true;

    /// <summary>
    /// 边数
    /// </summary>
    [Range(3, 360)]
    public int sides = 3;
    /// <summary>
    /// 旋转角度
    /// </summary>
    [Range(0, 360)]
    public float rotation = 0;
    /// <summary>
    /// 顶点数组
    /// </summary>
    [Range(0, 1)]
    public float[] VerticesDistances = new float[3];

    private float size = 0;

    public override Texture mainTexture
    {
        get
        {
            return m_Texture == null ? s_WhiteTexture : m_Texture;
        }
    }

    public Texture texture
    {
        get
        {
            return m_Texture;
        }
        set
        {
            if (m_Texture == value) return;
            m_Texture = value;
            SetVerticesDirty();
            SetMaterialDirty();
        }
    }
    #region 提供外部的接口
    public void DrawPolygon(int _sides)
    {
        sides = _sides;
        VerticesDistances = new float[_sides + 1];
        for (int i = 0; i < _sides; i++) VerticesDistances[i] = 1;
    }

    public void DrawPolygonNew()
    {
         List<float> datas = new List<float>();

        for (int i = 0; i < VerticesDistances.Length; i++) 
        {
            datas.Add(VerticesDistances[i]);
        }
        
        DrawPolygon(datas);
    }

    public void DrawPolygon(List<float> datas)
    {
        List<float> finalDatas = new List<float>(datas);
        sides = finalDatas.Count;
        // 加上最后一个点，最后一个点与第一个点重合
        finalDatas.Add(finalDatas[0]);
        VerticesDistances = finalDatas.ToArray();
        // 触发重绘
        SetVerticesDirty();
    }
    #endregion

    public void SetDirty()
    {
        SetVerticesDirty();
    }

    void Update()
    {
        // 根据宽高适配尺寸
        size = rectTransform.rect.width;
        if (rectTransform.rect.width > rectTransform.rect.height)
            size = rectTransform.rect.height;
        else
            size = rectTransform.rect.width;
    }

    protected UIVertex[] SetVertexs(Vector2[] vertices, Vector2[] uvs)
    {
        UIVertex[] vbo = new UIVertex[4];
        for (int i = 0; i < vertices.Length; i++)
        {
            var vert = UIVertex.simpleVert;
            vert.color = color;
            vert.position = vertices[i];
            vert.uv0 = uvs[i];
            vbo[i] = vert;
        }
        return vbo;
    }

    /// <summary>
    /// 重写OnPopulateMesh方法
    /// </summary>
    /// <param name="vh"></param>
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        Vector2 prevX = Vector2.zero;
        Vector2 prevY = Vector2.zero;
        Vector2 uv0 = new Vector2(0, 0);
        Vector2 uv1 = new Vector2(0, 1);
        Vector2 uv2 = new Vector2(1, 1);
        Vector2 uv3 = new Vector2(1, 0);
        Vector2 pos0;
        Vector2 pos1;
        Vector2 pos2;
        Vector2 pos3;
        float degrees = 360f / sides;
        int vertices = sides + 1;
        if (VerticesDistances.Length != vertices)
        {
            VerticesDistances = new float[vertices];
            for (int i = 0; i < vertices - 1; i++) VerticesDistances[i] = 1;
        }
        // 最后一个顶点，也即是第一个顶点
        VerticesDistances[vertices - 1] = VerticesDistances[0];
        for (int i = 0; i < vertices; i++)
        {
            float outer = -rectTransform.pivot.x * size * VerticesDistances[i];
            float inner = -rectTransform.pivot.x * size * VerticesDistances[i];
            float rad = Mathf.Deg2Rad * (i * degrees + rotation);
            float c = Mathf.Cos(rad);
            float s = Mathf.Sin(rad);
            uv0 = new Vector2(0, 1);
            uv1 = new Vector2(1, 1);
            uv2 = new Vector2(1, 0);
            uv3 = new Vector2(0, 0);
            pos0 = prevX;
            pos1 = new Vector2(outer * c, outer * s);
            if (fill)
            {
                pos2 = Vector2.zero;
                pos3 = Vector2.zero;
            }
            else
            {
                pos2 = new Vector2(inner * c, inner * s);
                pos3 = prevY;
            }
            prevX = pos1;
            prevY = pos2;
            vh.AddUIVertexQuad(SetVertexs(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));
        }
    }
}

UI界面

1.创建一个Image对象，最为雷达图的背景

2.假设雷达图当前有3个，创建3个Text，用于文本标记属性展示。

3.创建一个游戏对象，并挂载
UIPolygon.cs脚本。

UIPolygon组件属性介绍

Slider:多边形边数
VerticesDistances：顶点数组，后面数字代表数组大小，即顶点数
下方的Element代表每个顶点的比值，即属性百分比
。前面介绍到，边数与顶点的关系：边数+1 = 顶点数，即边数决定顶点数，当我们手动改变边数时，顶点数会随之改变，如下图：

代码

local att = {90,10,80}---测试数据，分别代表逃生，对抗，躲避
for i=1,3 do
    ui.polygon.VerticesDistances[i-1] = att[i] / 100
end
base.coroutine = coroutine.start(function()
    coroutine.wait(0.05)
    ui.polygon:SetVerticesDirty()
end)