美文网首页
UGUI雷达图《三》--- 圆形Image

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

作者: super41 | 来源:发表于2021-04-19 16:21 被阅读0次
  • 今天我们来实现一个圆形Image,如下图。(哈,这次其实不是画雷达图了,而是画圆形Icon,不过其原理和之前的雷达图是一样的,而且这里用到了前2篇没讲到的UV。所以这里列为这个系列的第三篇!)

    圆形Icon.png
  • 实现步骤

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

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

        //边数
        public int lineCount = 5;
        //半径
        public float radius = 100;
  1. 取宽和高较小的一边的一半,作为半径
    这里因为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);
            }
        }
    }
}

好,这次就到这里了~

相关文章

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

    今天我们来实现一个圆形Image,如下图。(哈,这次其实不是画雷达图了,而是画圆形Icon,不过其原理和之前的雷达...

  • 6、实现圆形组件

    圆形在很多地方都会有应用,圆形小地图,圆形头像框,圆形技能框,圆形瞄准镜框等。 在Unity中UGUI的IMage...

  • [Unity] UGUI远离Mask,实现圆形的Image

    参考: 丢掉Mask遮罩,更好的圆形Image组件   关于UGUI Mask存在的问题请移步参考文章,里面介绍的...

  • UGUI雷达图《二》

    今天我们来实现在Scene调节雷达图的效果 具体细节主要在第一篇,如果不清楚的可以看向这里 简单说下思路我们需要创...

  • UGUI雷达图《一》

    今天我们使用UGUI来实现这样一个雷达图雷达.gif 简单说下思路主要是通过自己定义顶点的位置来实现绘制多边形。那...

  • ugui image动画,支持动画完成通知。(改自ngui)

    Babybus-u3d技术交流-ugui image动画,支持动画完成通知。(改自ngui) ugui image...

  • Unity UGUI学习系列(三) ------ 雷达图实现

    本系列文章是学习siki学院UGUI整体解决方案-案例篇笔记GitHub地址:https://github.com...

  • Unity基础(24)-UGUI

    UGUI 控件是UGUI内置的,控件上面因因包含不同的组件而不同。 Image组件Image等价于NGUI的Spr...

  • NGUI与UGUI的区别

    总结: 1、NGUI与UGUI的区别 2、uGUI的Canvas 有世界坐标和屏幕坐标 3、uGUI的Image可...

  • Unity-uGUI与NGUI

    一、 uGUI与NGUI的区别 1、uGUI的Canvas 有世界坐标和屏幕坐标。 2、uGUI的Image可以使...

网友评论

      本文标题:UGUI雷达图《三》--- 圆形Image

      本文链接:https://www.haomeiwen.com/subject/csiilltx.html