NGUI组件中UISprite有个Flip功能,可以实现对图片的水平,垂直,中心对称显示,最近项目转到ugui中了,就想实现这个功能

1:先展示效果

无对称现象:

水平对称:

垂直对称:

中心对称:

2:实现原理:

新建脚本,并继承Image,通过实现image里面的OnPopulateMesh方法,通过对Image里面的顶点进行修改来实现图片的对称显示。下面是实现源代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using LazerFrameWork;
using UnityEngine.UI;
using System;
using System.Linq;
using Newtonsoft.Json;

namespace LazerFrameWork
{
    public class UIImageExtend : Image
    {
        [SerializeField]
        private EUIImageDirection UIImageDirection = EUIImageDirection.vertical;

        public EUIImageDirection GetUIImageDirection() { return UIImageDirection; }

        public void ChangeUIImageDirection(EUIImageDirection ImageDirection)
        {
            this.UIImageDirection = ImageDirection;
            SetAllDirty();
        }
        protected override void OnPopulateMesh(VertexHelper vh)
        {
            base.OnPopulateMesh(vh);
            List<UIVertex> mVertexList = new List<UIVertex>();
            vh.GetUIVertexStream(mVertexList);
            List<float> x_s = mVertexList.Select(v => v.position.x).ToList();
            List<float> y_s = mVertexList.Select(v => v.position.y).ToList();
            float center_x = (x_s.Max() + x_s.Min()) / 2;
            float center_y = (y_s.Max() + y_s.Min()) / 2;
            for (int i = 0; i < mVertexList.Count; i++)
            {
                UIVertex vertex = mVertexList[i];
                Vector3 pos = vertex.position;
                switch (UIImageDirection)
                {
                    case EUIImageDirection.horizontal:
                        pos.x = center_x * 2 - pos.x;
                        break;
                    case EUIImageDirection.vertical:
                        pos.y = center_y * 2 - pos.y;
                        break;
                    case EUIImageDirection.both:
                        pos.x = center_x * 2 - pos.x; 
                        pos.y = center_y * 2 - pos.y;
                        break;
                }
                vertex.position = pos;
                mVertexList[i] = vertex;
            }
            vh.Clear();
            vh.AddUIVertexTriangleStream(mVertexList);
        }

        public enum EUIImageDirection
        {
            none,
            horizontal,
            vertical,
            both,
        }
    }

}

补充:只实现这个脚本,中心对称选项UIImageExtend字段无法在检视面板显示,下面为了简单显示一下,重新对该组件实现检视面板重写就可以(否则它就会用image的见世面版的的字段显示了)

using System.Collections;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;

namespace LazerFrameWork
{
    [CanEditMultipleObjects]
    [CustomEditor(typeof(UIImageExtend))]
    public class UIImageAnimationInspector : Editor
    {
        /// <summary>
        /// Draw the inspector widget.
        /// </summary>

        public override void OnInspectorGUI()
        {
            base.OnInspectorGUI();
        }
    }
}

同学想对这个面板再美化一下的话,可以实现里面的OnInspectorGUI方法就可以了。最后对看到这篇文章的同学有所帮助。

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐