UGUI雷达图《三》--- 圆形Image

• 今天我们来实现一个圆形Image，如下图。（哈，这次其实不是画雷达图了，而是画圆形Icon，不过其原理和之前的雷达图是一样的，而且这里用到了前2篇没讲到的UV。所以这里列为这个系列的第三篇!）
  

  圆形Icon.png

• 实现步骤

1. 因为我们是在原Image上进行修改。所以这里新建一个脚本PolygonImage继承至Image.
   为啥不叫CirecleImage(圆形Image)，而是叫PolygonImage(多边形Image)呢。因为我们其实是把一个正方形分成正多边形，当边数越多，其实就越趋近圆。比如到正50边形就很圆了..

2. 接着我们定义两个属性：半径和边数

        //边数
        public int lineCount = 5;
        //半径
        public float radius = 100;

3. 取宽和高较小的一边的一半，作为半径
   这里因为Image及其基类并不是继承至UnityEngine.Object。lineCount属性无法在Inspector显示。
   所以这里在update()里让lineCount等于z坐标。所以相当于也可以在Inspector里改变边数了。这里只是方便演示，实际使用可以注释掉。

        protected void Update()
        {
            //取边长小的一边作为半径
            radius = Mathf.Min(rectTransform.rect.width,rectTransform.rect.height)/2;
            
            //因为基类Image不继承UnityEngine.Object,
            //所以lineCount无法序列化,所以这里通过lineCount等于z坐标的方式。来间接实现在Inspector面板修改边数的功能
            lineCount = Mathf.Max(3,(int)transform.localPosition.z);
            SetAllDirty();
        }

4.添加顶点和三角形
这里添加顶点和三角形和之前讲的一样。唯一不同的就是加入了UV，UV的范围是0~1。所以这里我们可以用x坐标和宽度的比值，y坐标和高度的比值，再加上0.5偏移。即可算出UV

        protected override void OnPopulateMesh(VertexHelper vh)
        {
            //添加顶点
            AddAllVert(vh);
            //添加三角形
            AddTriangle(vh);
        }

        private void AddAllVert(VertexHelper vh)
        {
            vh.Clear();
            //计算每个角的弧度
            float baseRad = (float)Math.PI * 2 / lineCount;

            for (int i = 0; i < lineCount; i++)
            {
                //计算当前的弧度
                var rad = i * baseRad;
                
                //根据弧度换算坐标
                var x = Mathf.Sin(rad) * radius;
                var y = Mathf.Cos(rad) * radius;
                Vector2 pos = new Vector2(x,y);

                //根据坐标计算UV 
               var uvX = x / rectTransform.rect.width + 0.5f;
               var uvY = y / rectTransform.rect.height + 0.5f;

                var uv = new Vector2(uvX,uvY);
                
                AddVert(vh,pos,uv);
            }
        }
        
            
        private void AddVert(VertexHelper vh,Vector2 pos,Vector2 uv)
        {
            vh.AddVert(pos,color,uv);
        }

        private void AddTriangle(VertexHelper vh)
        {
            for (int i = 0; i < lineCount-1; i++)
            {
                vh.AddTriangle(0,i,i+1);
            }
        }

这样就OK了。回到Unity,新建一个UI空物体，挂上该脚本，给上图标。修改Z坐标，即可出现多边形Image,边数越多就越圆。如下图

多边形.gif
最后，附上完整代码

using System;

namespace UnityEngine.UI
{   
    public class PolygonImage : Image
    {    
        //边数
        public int lineCount = 5;
        //半径
        public float radius = 100;
        
        protected void Update()
        {
            //取边长小的一边作为半径
            radius = Mathf.Min(rectTransform.rect.width,rectTransform.rect.height)/2;
            
            //因为基类Image不继承UnityEngine.Object,
            //所以lineCount无法序列化,所以这里通过等于z坐标的方式。来间接实现在Inspector面板修改边数的功能
            lineCount = Mathf.Max(3,(int)transform.localPosition.z);
            SetAllDirty();
        }

        protected override void OnPopulateMesh(VertexHelper vh)
        {
            //添加顶点
            AddAllVert(vh);
            //添加三角形
            AddTriangle(vh);
        }

        private void AddAllVert(VertexHelper vh)
        {
            vh.Clear();
            //计算每个角的弧度
            float baseRad = (float)Math.PI * 2 / lineCount;

            for (int i = 0; i < lineCount; i++)
            {
                //计算当前的弧度
                var rad = i * baseRad;
                
                //根据弧度换算坐标
                var x = Mathf.Sin(rad) * radius;
                var y = Mathf.Cos(rad) * radius;
                Vector2 pos = new Vector2(x,y);

                //根据坐标计算UV 
               var uvX = x / rectTransform.rect.width + 0.5f;
               var uvY = y / rectTransform.rect.height + 0.5f;

                var uv = new Vector2(uvX,uvY);
                
                AddVert(vh,pos,uv);
            }
        }
        
            
        private void AddVert(VertexHelper vh,Vector2 pos,Vector2 uv)
        {
            vh.AddVert(pos,color,uv);
        }

        private void AddTriangle(VertexHelper vh)
        {
            for (int i = 0; i < lineCount-1; i++)
            {
                vh.AddTriangle(0,i,i+1);
            }
        }
    }
}

好，这次就到这里了~