雷达图的绘制

一、首先要搞清楚，到底UGUI是如何对UI进行绘制的。看UGUI源码

ugui源码地址：

D:\Unity\Hub\Editor\2021.3.15f1c1\Editor\Data\Resources\PackageManager\BuiltInPackages\com.unity.ugui\Runtime\UI\Core

源码里面的两个方法

1、设置图像的纹理

/// <summary>
        /// Image's texture comes from the UnityEngine.Image.
        /// </summary>
        public override Texture mainTexture
        {
            get
            {
                if (activeSprite == null)
                {
                    if (material != null && material.mainTexture != null)
                    {
                        return material.mainTexture;
                    }
                    return s_WhiteTexture;
                }

                return activeSprite.texture;
            }
        }

 2、更新UI渲染器网格。

/// <summary>
        /// Update the UI renderer mesh.
        /// </summary>
        protected override void OnPopulateMesh(VertexHelper toFill)
        {
            if (activeSprite == null)
            {
                base.OnPopulateMesh(toFill);
                return;
            }

            switch (type)
            {
                case Type.Simple:
                    if (!useSpriteMesh)
                        GenerateSimpleSprite(toFill, m_PreserveAspect);
                    else
                        GenerateSprite(toFill, m_PreserveAspect);
                    break;
                case Type.Sliced:
                    GenerateSlicedSprite(toFill);
                    break;
                case Type.Tiled:
                    GenerateTiledSprite(toFill);
                    break;
                case Type.Filled:
                    GenerateFilledSprite(toFill, m_PreserveAspect);
                    break;
            }
        }

二、VertexHelper（顶点助手）

//添加顶点(顶点坐标，颜色，uv坐标){顶点坐标颜色默认情况下看不出来，shader里面设置了才能用，如果shader没设置不能用}
vh.AddVert(Vector3.zero, color, new Vector2(0.5f, 0.5f));
//添加绘制顺序
vh.AddTriangle(0, arr.Length, 1); 
//导出一个网格
vh.FillMesh(mesh);

 

绘制雷达图以及描边 

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

public class MyImage : MaskableGraphic
{
    //精灵
    public Sprite activeSprite;
    public float m = 1;
    public Color mColor = Color.red;
    //纹理
    public override Texture mainTexture
    {
        get
        {
            if (activeSprite == null)
            {
                if (material != null && material.mainTexture != null)
                {
                    //有材质球使用材质球
                    return material.mainTexture;
                }
                //都没有使用白色的
                return s_WhiteTexture;
            }
            //有精灵使用精灵的
            return activeSprite.texture;
        }
    }
    public float[] arr;

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        //小于3条边绘制默认图形
        if (arr.Length < 3)
        {
            base.OnPopulateMesh(vh);
            return;
        }
        //获取高度
        float w = rectTransform.sizeDelta.x;
        float h = rectTransform.sizeDelta.y;
        //找到数组中最大值
        float max = arr.Max();
        //计算最大值和宽高的比例
        float p = w < h ? ((w / 2) / max) : ((h / 2) / max);
        vh.Clear();
        //每份弧度
        float ang = 2 * Mathf.PI / arr.Length;
        //先画圆心
        vh.AddVert(Vector3.zero, color, new Vector2(0.5f, 0.5f));
        for (int i = 0; i < arr.Length; i++)
        {
            //计算顶点坐标
            float x = Mathf.Sin(i * ang) * arr[i] * p;
            float y = Mathf.Cos(i * ang) * arr[i] * p;
            //计算uv坐标
            float uvx = (x + w / 2) / w;
            float uvy = (y + h / 2) / h;
            //添加顶点
            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);
            }
        }
        //画描边
        int next = arr.Length + 1;
        for (int i = 0; i < arr.Length; i++)
        {
            //内顶点
            float x0 = Mathf.Sin(i * ang) * (arr[i] * p - m);
            float y0 = Mathf.Cos(i * ang) * (arr[i] * p - m);
            //计算uv坐标
            float uvx0 = (x0 + w / 2) / w;
            float uvy0 = (y0 + h / 2) / h;
            //添加顶点
            vh.AddVert(new Vector3(x0, y0, 0), mColor, new Vector2(uvx0, uvy0));

            //外顶点
            //计算顶点坐标
            float x = Mathf.Sin(i * ang) * arr[i] * p;
            float y = Mathf.Cos(i * ang) * arr[i] * p;
            //计算uv坐标
            float uvx = (x + w / 2) / w;
            float uvy = (y + h / 2) / h;
            //添加顶点
            vh.AddVert(new Vector3(x, y, 0), mColor, new Vector2(uvx, uvy));
            //添加绘制顺序
            if (i == arr.Length - 1)
            {
                vh.AddTriangle(i * 2 + next, i * 2 + 1 + next,1 + next);
                vh.AddTriangle(i * 2 + next, 1 + next, next);
            }
            else
            {
                vh.AddTriangle(i * 2 + next, i * 2 + 1 + next, (i + 1) * 2 + 1 + next); ;
                vh.AddTriangle(i * 2 + next, (i + 1) * 2 + 1 + next, (i + 1) * 2 + next); ;
            }
        }
    }
}

 按钮点击之后切换雷达图

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Btn : MonoBehaviour
{
    public MyImage image;
   

    public void OnBtn()
    {
        List<float> list = new List<float>();
        for (int i = 0; i < Random.Range(3,6); i++)
        {
            list.Add(Random.Range(0.1f, 100));
        }
        image.arr = list.ToArray();
        image.SetVerticesDirty();//重设顶点
    }
}