绘制雷达图

VertexHelper 顶点助手，帮助绘制顶点，本质还是一个mesh网格

自己用mesh处理或用VertexHelper渲染都是可行的

使用VertexHelper的好处在于其中对于集合等封装了对象池，有利于系统的优化

首先判断sprite是否为空，如果为空就走基类中的方法，否则就判断类型

   public override Texture mainTexture
   {
       get
       {
           if (activeSprite == null)
           {
               if (material != null && material.mainTexture != null)
               {
                   return material.mainTexture;
               }
               return s_WhiteTexture;
           }

           return activeSprite.texture;
       }
   }

雷达图示例如下：

如图所示，我们发现雷达图的本质依然是渲染多边体，区别在于内多变体的每个顶点的半径不一样

让UV坐标等于图片坐标

设置默认颜色

清理VertexHelper的数据

向VertexHelper添加顶点，顶点中的参数为顶点坐标，颜色，UV坐标

之后通过最后两行代码梳理绘制顺序，形成对应的模型

以上就是VertexHelper的使用方法和具体原理

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

[AddComponentMenu("UI/RaderMap", 11)]
public class RaderMap : MaskableGraphic
{
    //数值
    public float[] nums = new float[3];
    public Sprite activeSprite;
    //描边宽度
    public int board = 3;
    //描边颜色
    public Color boardColor = Color.blue;

    public override Texture mainTexture
    {
        get
        {
            if (activeSprite == null)
            {
                if (material != null && material.mainTexture != null)
                {
                    return material.mainTexture;
                }
                return s_WhiteTexture;
            }

            return activeSprite.texture;
        }
    }
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        if (nums.Length >= 3)
        {
            vh.Clear();
            Rect rect = this.rectTransform.rect;
            //角度
            float angle = 2 * Mathf.PI / nums.Length;
            //圆心
            vh.AddVert(Vector3.zero, color, new Vector2(0.5f, 0.5f));
            //限制  根据最大值调整比例
            //获取数值最大值 
            float max = nums.Max();
            //根据最大值调整比例
            float p = rect.width < rect.height ? (rect.width / 2 / max) : (rect.height / 2 / max);
            for (int i = 0; i < nums.Length; i++)
            {
                //五边形数值顶点
                float x = Mathf.Sin(angle * i) * nums[i] * p;
                float y = Mathf.Cos(angle * i) * nums[i] * p;
                float uvx = (x + rect.width / 2) / rect.width;
                float uvy = (y + rect.height / 2) / rect.height;
                vh.AddVert(new Vector3(x, y, 0), color, new Vector2(uvx, uvy));
                //添加绘制
                if (i == 0)
                {
                    vh.AddTriangle(0, nums.Length, 1);
                }
                else
                {
                    vh.AddTriangle(0, i, i + 1);
                }
            }
            //使用过的顶点数量
            int next = nums.Length + 1;
            //添加描边顶点
            for (int i = 0; i < nums.Length; i++)
            {
                //五边形数值描边内圈顶点
                float x0 = Mathf.Sin(angle * i) * (nums[i] * p - board);
                float y0 = Mathf.Cos(angle * i) * (nums[i] * p - board);
                float uvx0 = (x0 + rect.width / 2) / rect.width;
                float uvy0 = (y0 + rect.height / 2) / rect.height;
                vh.AddVert(new Vector3(x0, y0, 0), boardColor, new Vector2(uvx0, uvy0));
                //描边外圈顶点
                float x = Mathf.Sin(angle * i) * nums[i] * p;
                float y = Mathf.Cos(angle * i) * nums[i] * p;
                float uvx = (x + rect.width / 2) / rect.width;
                float uvy = (y + rect.height / 2) / rect.height;
                vh.AddVert(new Vector3(x, y, 0), boardColor, new Vector2(uvx, uvy));
                //添加绘制  
                if (i == nums.Length-1)
                {
                    vh.AddTriangle(i * 2 + next, i * 2 + 1 + next, 0 + next);
                    vh.AddTriangle(i * 2 + 1 + next, 1 + next, 0 + next);
                }
                else //(0, 1, 2)(1, 3, 2)
                {
                    vh.AddTriangle(i * 2 + next, i * 2 + 1 + next, (i + 1) * 2 + next);
                    vh.AddTriangle(i * 2 + 1 + next, (i + 1) * 2 + 1 + next, (i + 1) * 2 + next);
                }
            }
        }
    }
}