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

fwalker

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



圆形Icon.png



实现步骤

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

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

• 取宽和高较小的一边的一半，作为半径
  这里因为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);            }        }    }}
好，这次就到这里了~