Unity radar chart

Polygonal Radar Chart Template

Unity Radar Chart Leida In game development, the radar chart can provide users with intuitive data distribution, and the distribution of various attributes is represented by the circumference of the polygon, which is simple and clear. This article will introduce how to use Unity UI to build a basic radar chart, and analyze its implementation principle.

First, we need to create a GameObject containing the Leida component, and then mount a Mask component to it to achieve the polygon clipping effect. In the component, we need to define the coordinate list of the points of the polygon, and the coordinates of the center of the radar map in the RectTransform.

Then, we need to override the OnPopulateMesh method of the Leida component to draw polygons. In this method, we first clear the Toolbar through VertexHelper, then call the AddVert method to add each point of the polygon, and finally define the triangle relationship between the polygons through AddTriangle.

Next, we convert the points of the polygon into Vector3coordinate vectors of the type, and then get the rectangular area of the UITexture from RectTransfromthe to calculate the radius of the polygon. In order to ensure that the size of the polygon does not exceed the rectangular area, we calculate the range ratio of the polygon diameter, which is used to adjust the size of the polygon. The final code implementation is as follows:

// 引用命名空间
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);
                }
                
            }
        }
    }
}

In short, the realization of the Unity UI radar chart is still very simple. You only need to master the relevant knowledge of uGUI in Unity and combine the basic principles of polygons to start designing the radar chart you want.

Guess you like