Mesh雷达图

ugui源码地址

Unity\Hub\Editor\2020.3.33f1c2\Editor\Data\Resources\PackageManager\BuiltInPackages\com.unity.ugui\Runtime\UI\Core

在这里可以查找到我们所需的所有API的源码

第一步

创建一个Image,并且将它的Image组件移除

 第二步

给image挂上脚本，写入代码

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

public class CreateWu : MaskableGraphic
{
    /// <summary>
    /// 添加图片所需的源码(可在上述的源代码里查找到)
    /// </summary>
    public override Texture mainTexture
    {
        get
        {
            if (material!=null&&material.mainTexture!=null)
            {
                return material.mainTexture;
            }
            return s_WhiteTexture;
        }
    }
    public float[] arr;
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        if (arr.Length<3)///三个点才能形成图形,可以防止报错
        {
            base.OnPopulateMesh(vh);
            return;
        }
        
        vh.Clear();
        //每个角的弧度
        float ang = 2 * Mathf.PI / arr.Length;
        float w = rectTransform.sizeDelta.x;
        float h = rectTransform.sizeDelta.y;
        //先画圆心
        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];
            float y=  Mathf.Cos(i * ang) * arr[i];
            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);
            }
        }
    }
}

第三步

接下来设置5个顶点到圆心的距离，也就是半径

还要将图片的shader类型改为UI/Default

设置最大值并点击Button按钮随机数组改变雷达图

为我们的雷达图设置最大的半径范围

代码如下

image身上挂载

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

public class CreateLei : MaskableGraphic
{
    /// 添加图片所需的源码(可在上述的源代码里查找到)
    /// </summary>
    public override Texture mainTexture
    {
        get
        {
            if (material != null && material.mainTexture != null)
            {
                return material.mainTexture;
            }
            return s_WhiteTexture;
        }
    }
    public float[] arr;
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        if (arr.Length < 3)///三个点才能形成图形,可以防止报错
        {
            base.OnPopulateMesh(vh);
            return;
        }


        vh.Clear();
        //每个角的弧度
        float ang = 2 * Mathf.PI / arr.Length;
        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.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; 
            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);
            }
        }
    }

}

Button上挂载脚本代码如下

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

public class BtnSui : MonoBehaviour
{
    public CreateLei image;
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
    public void OnSui()
    {
        List<float> list = new List<float>();
        for (int i= 0; i < Random.Range(3,9); i++)
        {
            list.Add(Random.Range(0.1f, 100));
        }
        image.arr = list.ToArray();
        image.SetVerticesDirty();
    }
}

注意：一定要记得将image拖到脚本里

 

 效果如下

 为雷达图添加边框

代码如下

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

public class CreateWu : MaskableGraphic
{
    /// <summary>
    /// 添加图片所需的源码(可在上述的源代码里查找到)
    /// </summary>
    public override Texture mainTexture
    {
        get
        {
            if (material!=null&&material.mainTexture!=null)
            {
                return material.mainTexture;
            }
            return s_WhiteTexture;
        }
    }
    public float[] arr;
    public float m = 1;
    public Color mcolor = Color.red;
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        if (arr.Length<3)///三个点才能形成图形,可以防止报错
        {
            base.OnPopulateMesh(vh);
            return;
        }

        
        vh.Clear();
        //每个角的弧度
        float ang = 2 * Mathf.PI / arr.Length;
        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.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;
            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);
            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);
            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);
            }
        }
    }
}

效果如下