UGUI雷达图《二》

今天我们来实现在Scene调节雷达图的效果

雷达调节.gif

具体细节主要在第一篇，如果不清楚的可以看向这里
UGUI雷达图《一》

• 简单说下思路
  我们需要创建出几个子物体，这样就可以在Scene里自由拖曳，接着我们把每个点的局部坐标添加为顶点就可以了。

• 开始实现

1. 自动创建出对应的子物体个数

        private void CheckCount()
        {
            //自动填充，并设置名字
            while (transform.childCount < ChildCount)
            {
                GameObject gameObject = new GameObject();
                gameObject.transform.SetParent(transform);
                gameObject.name = transform.childCount.ToString();
            }
        }

2. 把子物体的局部坐标添加为顶点

        private void AddVert(VertexHelper vh)
        {
            vh.Clear();

            for (int i = 0; i < ChildCount; i++)
            {
                var childTran = transform.GetChild(i);
                var pos = childTran.localPosition;
                vh.AddVert(pos, Color.blue, Vector2.zero);
            }
        }

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

3. 实现实时刷新.这步挺关键的，添加这步后才能在移动子物体坐标后，实时刷新图形

        private void Update()
        {
            //实时绘制
            SetAllDirty();
        }

最后上下完整代码

    public class Radar2 : Graphic
    {
        public int ChildCount;

        protected override void OnPopulateMesh(VertexHelper vh)
        {
            if (ChildCount <= 2)
            {
                return;
            }
            
            //检查子孩子个数
            CheckCount();
            //添加顶点
            AddVert(vh);
            //添加三角形
            AddTriangle(vh);
        }
        
        
        private void CheckCount()
        {
            //自动填充，并设置名字
            while (transform.childCount < ChildCount)
            {
                GameObject gameObject = new GameObject();
                gameObject.transform.SetParent(transform);
                gameObject.name = transform.childCount.ToString();
            }
        }

        private void AddVert(VertexHelper vh)
        {
            vh.Clear();

            for (int i = 0; i < ChildCount; i++)
            {
                var childTran = transform.GetChild(i);
                var pos = childTran.localPosition;
                vh.AddVert(pos, Color.blue, Vector2.zero);
            }
        }

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

       //另外一种添加三角形的方法
        private void AddTriangle2(VertexHelper vh)
        {
            for (int i = 0; i < ChildCount -1; i++)
            {
                vh.AddTriangle(0,i,i+1);
            }
        }      

        private void Update()
        {
            //实时绘制
            SetAllDirty();
        }
    }

在Canavas下新建一个空物体，并挂上该脚本，就可以调起来了~

雷达拖动.png

好，这次就到这里了。有没有发现这前2篇，都没有用到UV，UV一直都赋为Vector.Zero...
第三篇有讲到UV，感兴趣可以戳这里：UGUI雷达图《三》--- 圆形Image