unity雷达图(附带拖拽)

在unity中雷达图的用法通常都是显示角色的属性等,通过读取配置文件使用unity中自带的MaskableGraphic组件实现,该组件读者可以自行查阅,笔者主要使用该组件的图像渲染功能,雷达图效果图如下图所示:

常规雷达图都是将一个圆分割成需要的份数,然后求出圆上位置的坐标

依次使用mesh从圆形点、圆上位置、圆上相邻位置绘制三角形,圆上位置如图所示:

下面是实现效果的代码

protected override void OnPopulateMesh(VertexHelper vh)
{
    base.OnPopulateMesh(vh);
    vh.Clear(); // 清空当前的顶点数据

    rad = 2 * Mathf.PI / s.Count; // 计算每个扇形的角度

    vh.AddVert(Vector3.zero, color, Vector2.zero); // 添加顶点，代表雷达图的中心点

    for (int i = 0; i < s.Count; i++)
    {
        float x = Mathf.Cos(rad * i + Mathf.PI / 2) * s[i] * size; // 根据角度和半径计算顶点的 x 坐标
        float y = Mathf.Sin(rad * i + Mathf.PI / 2) * s[i] * size; // 根据角度和半径计算顶点的 y 坐标

        vh.AddVert(new Vector3(x, y, 0), color, Vector2.zero); // 添加顶点

        if (RadarMgr.radarMgr.imgs[i] != null)
        {
            RadarMgr.radarMgr.imgs[i].transform.localPosition = new Vector3(x, y, 0); // 设置雷达图上的图像的位置
        }

        if (i == 0)
        {
            vh.AddTriangle(0, s.Count, 1); // 添加三角形，连接中心点和第一个顶点
        }
        else
        {
            vh.AddTriangle(0, i, i + 1); // 添加三角形，连接中心点和相邻的两个顶点
        }
    }
}

此处为可实现拖拽的雷达图的附加脚本

// 尝试将屏幕坐标转换为相对于父 RectTransform 的本地坐标
bool flag = RectTransformUtility.ScreenPointToLocalPointInRectangle(
    transform.parent.transform as RectTransform,  // 目标 RectTransform 的父级 RectTransform
    new Vector2(Input.mousePosition.x, Input.mousePosition.y),  // 屏幕坐标
    Camera.main,  // 使用的相机
    out Vector2 point);  // 转换后的本地坐标

// 如果转换成功
if (flag)
{
    // 设置当前对象的本地坐标为转换后的坐标
    transform.localPosition = new Vector3(point.x, point.y, 0);

    // 查找 Canvas 下的 Image 下的 GameObject 对象，并调用其 RadarMap 组件的 OnDrag 方法，传入 index 参数
    GameObject.Find("Canvas/Image/GameObject").GetComponent<RadarMap>().OnDrag(index);
}