Unity雷达图效果

我们要用到MaskableGraphic组件实现雷达图效果

MaskableGraphic是Unity UGUI中的一个组件，用于实现图形的遮罩效果。通过该组件，我们可以将一个图形对象的显示范围限制在一个指定的区域内，从而实现遮罩效果

首先创建一个图片为RadarBack 给他赋雷达背景的图片

再创建一个空物体为Radar

以下为空物体Radar需要挂载的脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
[RequireComponent(typeof(CanvasRenderer))]
public class Radar : MaskableGraphic
{

    [SerializeField]
    RectTransform rect;
    //弧度
    float red;
    //三角形个数
    int num = 5;
    //相对于背景图的半径
    float size=0;
    //限制集合list_flo的取值范围为0.2到1之间
    [Range(0.2f, 1f)]
    [SerializeField]
    List<float> list_flo = new List<float>();
    //重写父类MaskableGraphic的Start函数
    protected override void Start()
    {
        red = Mathf.PI * 2 / num;
        //判断项目是否执行起来
        if (Application.isPlaying)
        {
            for (int i = 0; i < num; i++)
            {
                list_flo[i] = 0.2f;
            }
        }
    }
    //重写父类MaskableGraphic的OnPopulateMesh函数
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        //添加中心原点坐标
        vh.AddVert(new Vector3(0, 0, 0), Color.blue, Vector2.zero);
        for (int i = 0; i < num; i++)
        {
            float x = Mathf.Sin(i * red) * size * Mathf.Clamp(list_flo[i], 0.2f,1);
            float y = Mathf.Cos(i * red) * size * Mathf.Clamp(list_flo[i], 0.2f, 1);
            //添加每个点的坐标
            vh.AddVert(new Vector3(x, y, 0), Color.blue, Vector2.zero);
            //判断是否为最后一层
            if (i == num - 1)
            {
                vh.AddTriangle(0, num, 1);
            }
            else
            {
                vh.AddTriangle(0, i + 1, i + 2);
            }
        }
    }
    private void Update()
    {
        //取背景图宽高的最小值 为直径  除以2 为半径
        if (rect.sizeDelta.x > rect.sizeDelta.y)
        {
            size = rect.sizeDelta.y / 2;
        }
        else
        {
            size = rect.sizeDelta.x / 2;
        }
    }
}
添加脚本之后会报一个错

该报错为：参数outofrangeexception:索引超出范围。必须非负且小于集合的大小

那是因为我们的浮点数集合长度为0  所以下标才会越界 

在Inspector面板将集合的长度手动设置为5即可

以下为雷达图背景

效果如下：