Unity雷达图

多边形雷达图样板

Unity雷达图 Leida 在游戏开发中，雷达图可以为用户提供直观的数据分布情况，通过多边形的圆周来表示各种属性的分布情况，简单明了。本文将介绍如何使用 Unity UI 来构建一个基本的雷达图，并解析其实现原理。

首先，我们需要创建一个包含 Leida 组件的 GameObject，再为其挂载一个 Mask 组件，以实现多边形的裁剪效果。component 中，我们需要定义多边形的点的坐标列表，以及雷达图的中心在 RectTransform 中的坐标。

然后，我们需要重写 Leida 组件的 OnPopulateMesh 方法，实现多边形的绘制。在此方法中，我们首先通过 VertexHelper 清空 Toolbar，然后调用 AddVert 方法添加多边形的各个点，最后再通过 AddTriangle 定义多边形之间的三角形关系。

接下来，我们将多边形的点转换为 Vector3 类型的坐标向量，再从 RectTransfrom 中获取 UITexture 的矩形区域，计算多边形的半径。为了保证多边形的大小不会超出矩形区域，我们计算多边形直径的范围比例，用于调整多边形的大小。 最终代码实现如下：

// 引用命名空间
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Linq;
using UnityEngine.UI;

// 创建雷达图 Leida 类，继承自 MaskableGraphic
public class Leida : MaskableGraphic
{

    // 获取我们的图片
    public Texture sprite;

    // 创建多边形数组
    public float[] arr;

    // 重写 mainTexture 属性
    public override Texture mainTexture
    {
        get
        {
            if (sprite == null)
            {
                if (material != null && material.mainTexture != null)
                {
                    return material.mainTexture;
                }
                return s_WhiteTexture;
            }
            return sprite;
        }
    }

    // 重写 OnPopuateMesh 方法，执行绘制操作
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        // 清空VertexHelper
        vh.Clear();

        // 判断多边形数组是否大于等于3
        if (arr.Length >= 3)
        {
            vh.AddVert(Vector3.zero, color, new Vector2(0.5f, 0.5f));

            // 每个多边形之间的夹角
            float ang = (2 * Mathf.PI) / arr.Length;

            // 获取UITexture的矩形区域
            Rect rect = rectTransform.rect;

            // 计算内部多边形的半径
            float r = rect.width < rect.height ? (rect.width / 2) : (rect.height / 2);

            // 计算多边形直径的范围比例
            float p = r / arr.Max();

            // 循环遍历多边形数组，生成多边形
            for (int i = 0; i < arr.Length; i++)
            {
                // 多边形点的坐标
                float x = Mathf.Sin(ang  i)  arr[i]  p;
                float y = Mathf.Cos(ang  i)  arr[i]  p;

                // UV坐标
                float uvx = (x + r) / rect.width;
                float uvy = (y + r) / rect.height;

                // 添加多边形的各个点
                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);
                }
                
            }
        }
    }
}

总之，Unity UI 雷达图的实现还是十分简单的，只需要掌握好 Unity 中uGUI的相关知识，结合多边形的基本原理，就可以 开始设计出自己想要的雷达图。