unity ugui image组件ngui uisprite 对称显示功能
·
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方法就可以了。最后对看到这篇文章的同学有所帮助。
更多推荐
所有评论(0)