UGUI雷达图《一》

• 今天我们使用UGUI来实现这样一个雷达图
  雷达.gif

1. 简单说下思路
   主要是通过自己定义顶点的位置来实现绘制多边形。那怎么自定义顶点呢，我们可以找到Text或Image等UI的基类Graphic。里面有OnPopulateMesh(VertexHelper vh) 方法。我们可以通过重写这个方法来实现绘制。

2. 先简单的画个正方形

• 可以看到方法里有VertexHelper vh这个参数。我们需要向这个参数添加两个东西，
  第一个当然是添加顶点：vh.AddVert(vector3, Color.blue, Vector2.zero);
  第二个是添加三角形 vh.AddTriangle(0, 1, 2);
  这里的0，1，2指什么呢，指顶点的序号，第一个添加进去的是0.第二个添加进去的是1。我们按3个为一组添加三角形，用顺时针的方向
• 接下来，新建一个脚本，正式画正方形

   public class SimpleGraphic : Graphic
    {
        protected override void OnPopulateMesh(VertexHelper vh)
        {
            vh.Clear();

            //添加顶点
            AddVert(vh, 0, 0); // 0：左下角
            AddVert(vh, 0, 100); // 1： 左上角
            AddVert(vh, 100, 100); // 2： 右上角
            AddVert(vh, 100, 0); // 3：右下角

            //三角形
            vh.AddTriangle(0, 1, 2);
            vh.AddTriangle(2, 3, 0);
        }

        //简单封装
        void AddVert(VertexHelper vh, float x, float y)
        {
            Vector3 vector3 = new Vector3(x, y);
            vh.AddVert(vector3, Color.blue, Vector2.zero);//添加顶点关键代码
        }
    }

• 然后在场景里新建一个GameObject，挂上该脚本。GameObject要位于Canvas如下，如下图。可以看到正方形出来了

  
  正方形.png

OK，接下来我们正式画雷达图。先上代码

    public class Radar : Graphic
    {
        //点的个数
        [Range(3, 12)] public int pointCount = 5;
        
        //边长的一半
        public float LenSize = 100;
        
        //每一条边的比例
        public float[] ratioArray = new float[]{1,1,1,1,1};
        
        private void Update()
        {
            //取宽高最小的一边作为边长。
            LenSize = Mathf.Min(rectTransform.rect.width,rectTransform.rect.height)/2;
        }

        //设置每条边的比例
        public void SetRatio(float[] ratioArray)
        {
            this.ratioArray = ratioArray;
            SetAllDirty();
        }
        
        //设置每条边的比例
        public void SetRatio(List<float> ratioList)
        {
            this.ratioArray = ratioList.ToArray();
            SetAllDirty();
        }
        
        protected override void OnPopulateMesh(VertexHelper vh)
        {
            Draw(vh);
        }

        void Draw(VertexHelper vh)
        {
            AddVert(vh); //添加顶点
            AddTriangle(vh);//添加三角形
        }
        
        //添加顶点
        void AddVert(VertexHelper vh)
        {
            vh.Clear();
            //根据边数算出每个角的弧度
            float baseRad = 2 * Mathf.PI / pointCount;
            
            //根据弧度算出每个点的坐标
            for (int i = 0; i < pointCount; i++)
            {
                float rad = baseRad * i;
                float x = LenSize * Mathf.Sin(rad);
                float y = LenSize * Mathf.Cos(rad);
                Vector3 pos = new Vector2(x, y);

                //接收外界传入每条边的比例。乘以该比例。一般是（0~1）
                if (i < ratioArray.Length)
                {
                    pos *= ratioArray[i];
                }
                
                vh.AddVert(pos, Color.blue, Vector2.zero);
            }
        }
        
        //添加三角形
        void AddTriangle(VertexHelper vh)
        {
            int count = pointCount;
            int curIndex = 1;
            for (int j = 0; j < count - 2 ; j++)
            {
                vh.AddTriangle(0,curIndex, curIndex + 1);
                curIndex++;
            }
        }
         
        //另外一种添加三角形的方法
        private void AddTriangle2(VertexHelper vh)
        {
            for (int i = 0; i < pointCount-1; i++)
            {
                vh.AddTriangle(0,i,i+1);
            }
        }      
    }

• 方法里主要还是完成了 添加顶点和添加三角形 两个操作，注释基本附在代码里了。可以看到我们留了SetRatio(List<float> list)接口，可以供外面设置每条边的比例。
• 接下来我们开始测试一下

1. 先隐藏掉我们开始画正方形的GameObject。
   接下来新建ImgBg: 放雷达背景图
   新建Radar: 挂载我们新写的Radar脚本
   新建Test: 挂载接下来的 RadarTest 脚本, 并把Radar拖给自己

---

层级如下图

Canvas层级.png

2. 新建RadarTest脚本

public class RadarTest : MonoBehaviour
{
    public Radar _radar;
  
    void Update()
    {
        if (Input.GetMouseButton(0))
        {
            List<float> testList = new List<float>();
            for (int i = 0; i < 5; i++)
            {
                testList.Add(Random.Range(0f,1f));
            }
            _radar.SetRatio(testList);
        }
    }
}

测试脚本很简单。每按住鼠标，随机5个点并传给Radar绘制图形。实际运用时，可以传入具体数据。

好了，这次就介绍到这里~

嘿，看完是不是有一种直接在Scene窗口调节顶点的冲动。
传送门：UGUI雷达图《二》