Unity在运行时动态编辑UI
工作时候突然想到一个想法，让用户自己修改ui尺寸，做个类似Unity的编辑模式。
先上张动图：
思路：在每个物体的四周生成四个条状Image，四个角同样生成四个Image，
然后使用核心函数Transform.SetInsetAndSizeFromParentEdge(Edge edge, float inset, float size)处理物体拉动边界修改尺寸
参数含义：
| edge | Left = 0, Right = 1, Top = 2, Bottom = 3 |
依据父物体移动的边界 |
| inset | 插入值 | 如：edge为Top，那么inset代表当前物体位置，相对于父物体上边界的距离 |
| size | 尺寸 | 如：edge为Top，那么size代表当前物体垂直方向的尺寸 |
具体详细内容看这篇文章：https://www.jianshu.com/p/4592bf809c8b
直接上代码：
这是整个外边框的父类
using System; using UnityEngine; public class OutLine: IOutLine { /// <summary> /// 自身的框transform /// </summary> public RectTransform selfRect; /// <summary> /// 生成的物体名字 /// </summary> public string insLineName; /// <summary> /// 是否初始化 /// </summary> public bool isInit = false; /// <summary> /// 是否正在拖拽 /// </summary> public bool isDrag = false; /// <summary> /// 外框预设 /// </summary> GameObject outLinePrefab; /// <summary> /// 鼠标图片icon /// </summary> Texture2D enterIcon; GameObject lineObj; protected RectTransform lineObjRect; protected Vector2 startDragMousePos; /// <summary> /// 开始拖拽的时候物体sizeDelta的X值 /// </summary> protected float startDragObjSizeDeltaX; protected float startDragObjSizeDeltaY; /// <summary> /// 开始拖拽时候物体距离父物体边界距离 /// </summary> protected float startDragObjPosX; protected float startDragObjPosY; /// <summary> /// 鼠标移动后计算出来的物体size /// </summary> protected float newObjDisX; protected float newObjDisY; /// <summary> /// 记录物体世界坐标临时值 /// </summary> Vector2 worldPos; public virtual void Init(GameObject go) { selfRect = go.GetComponent<RectTransform>(); outLinePrefab = Resources.Load<GameObject>("Prefabs/OutLine"); enterIcon = Resources.Load<Texture2D>("Texture/MouseEnterIcon"); lineObj = GameObject.Instantiate(outLinePrefab, selfRect); lineObj.name = insLineName; lineObjRect = lineObj.GetComponent<RectTransform>(); EventTriggerListener.Get(lineObj).OnMouseDrag = DragLine; EventTriggerListener.Get(lineObj).OnMouseBeginDrag = BeginDragLine; EventTriggerListener.Get(lineObj).OnMouseEndDrag = EndDragLine; EventTriggerListener.Get(lineObj).OnMouseEnter = EnterLine; EventTriggerListener.Get(lineObj).OnMouseExit = ExitLine; isInit = true; } /// <summary> /// updata中刷新调用（后续可添加颜色、材质球等属性） /// </summary> /// <param name="points">物体的四个边界顶点</param> /// <param name="lineWidth">线条的宽度</param> public virtual void RefreshRect(Vector2[] points,float lineWidth) { } /// <summary> /// 鼠标进入事件 更改鼠标icon /// </summary> void EnterLine() { if (!isDrag) { Cursor.SetCursor(enterIcon, Vector2.zero, CursorMode.Auto); } } /// <summary> /// 鼠标退出事件，恢复鼠标icon /// </summary> void ExitLine() { if (!isDrag) { Cursor.SetCursor(null, Vector2.zero, CursorMode.Auto); } } /// <summary> /// 开始拖拽事件 /// </summary> void BeginDragLine() { isDrag = true; startDragMousePos = Input.mousePosition; worldPos = selfRect.position;//先记录先物体的世界坐标，防止在更改锚点的时候无法恢复原位 startDragObjSizeDeltaX = selfRect.sizeDelta.x; startDragObjSizeDeltaY = selfRect.sizeDelta.y; SetAnchoredPos(); //更改锚点设置 selfRect.ForceUpdateRectTransforms();//强制刷新下 selfRect.position = worldPos; GetStartDragObjPos(); } /// <summary> /// 更改锚点设置 /// </summary> protected virtual void SetAnchoredPos() { } /// <summary> /// 获取距离父物体边界值 /// </summary> protected virtual void GetStartDragObjPos() { } /// <summary> /// 拖拽事件 /// </summary> protected virtual void DragLine() { } /// <summary> /// 拖拽结束 /// </summary> void EndDragLine() { isDrag = false; } } public interface IOutLine { void Init(GameObject go); void RefreshRect(Vector2[] points, float lineWidth); }
上面父类中EventTriggerListener就是很常用的鼠标事件监听：
using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class EventTriggerListener : EventTrigger { public Action OnMouseDown; public Action OnMouseUp; public Action OnMouseClick; public Action OnMouseDrag; public Action OnMouseBeginDrag; public Action OnMouseEndDrag; public Action OnMouseEnter; public Action OnMouseExit; public static EventTriggerListener Get(GameObject go) { EventTriggerListener eventTriggerListener = go.GetComponent<EventTriggerListener>(); if (eventTriggerListener == null) { eventTriggerListener = go.AddComponent<EventTriggerListener>(); } return eventTriggerListener; } public override void OnPointerDown(PointerEventData eventData) { OnMouseDown?.Invoke(); } public override void OnPointerClick(PointerEventData eventData) { OnMouseClick?.Invoke(); } public override void OnPointerUp(PointerEventData eventData) { OnMouseUp?.Invoke(); } public override void OnDrag(PointerEventData eventData) { OnMouseDrag?.Invoke(); } public override void OnPointerEnter(PointerEventData eventData) { OnMouseEnter?.Invoke(); } public override void OnPointerExit(PointerEventData eventData) { OnMouseExit?.Invoke(); } public override void OnBeginDrag(PointerEventData eventData) { OnMouseBeginDrag?.Invoke(); } public override void OnEndDrag(PointerEventData eventData) { OnMouseEndDrag?.Invoke(); } }
然后子类继承此父类，重写方法：
using UnityEngine; #region 四周的线 public class OutLineUp: OutLine { protected override void SetAnchoredPos() { selfRect.anchorMax = new Vector2(0.5f, 0); selfRect.anchorMin = new Vector2(0.5f, 0); } public override void RefreshRect(Vector2[] points, float lineWidth) { lineObjRect.sizeDelta = new Vector2(Mathf.Abs(points[1].x - points[0].x), lineWidth); lineObjRect.anchoredPosition = new Vector2(0, selfRect.sizeDelta.y / 2f + lineWidth / 2f); } protected override void GetStartDragObjPos() { startDragObjPosY = selfRect.anchoredPosition.y - selfRect.sizeDelta.y / 2f; } protected override void DragLine() { newObjDisY = startDragObjSizeDeltaY + (Input.mousePosition.y - startDragMousePos.y); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, startDragObjPosY, newObjDisY); } } public class OutLineRight : OutLine { protected override void SetAnchoredPos() { selfRect.anchorMax = new Vector2(0f, 0.5f); selfRect.anchorMin = new Vector2(0f, 0.5f); } public override void RefreshRect(Vector2[] points, float lineWidth) { lineObjRect.sizeDelta = new Vector2(lineWidth, Mathf.Abs(points[1].y - points[2].y)); lineObjRect.anchoredPosition = new Vector2(selfRect.sizeDelta.x / 2f + lineWidth / 2f, 0); } protected override void GetStartDragObjPos() { startDragObjPosX = selfRect.anchoredPosition.x - selfRect.sizeDelta.x / 2f; } protected override void DragLine() { newObjDisX = startDragObjSizeDeltaX + (Input.mousePosition.x - startDragMousePos.x); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, startDragObjPosX, newObjDisX); } } public class OutLineDown : OutLine { protected override void SetAnchoredPos() { selfRect.anchorMax = new Vector2(0.5f, 1); selfRect.anchorMin = new Vector2(0.5f, 1); } public override void RefreshRect(Vector2[] points, float lineWidth) { lineObjRect.sizeDelta = new Vector2(Mathf.Abs(points[3].x - points[2].x), lineWidth); lineObjRect.anchoredPosition = new Vector2(0, -selfRect.sizeDelta.y / 2f - lineWidth / 2f); } protected override void GetStartDragObjPos() { startDragObjPosY = -selfRect.anchoredPosition.y - selfRect.sizeDelta.y / 2f; } protected override void DragLine() { newObjDisY = startDragObjSizeDeltaY - (Input.mousePosition.y - startDragMousePos.y); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, startDragObjPosY, newObjDisY); } } public class OutLineLeft : OutLine { protected override void SetAnchoredPos() { selfRect.anchorMax = new Vector2(1, 0.5f); selfRect.anchorMin = new Vector2(1, 0.5f); } public override void RefreshRect(Vector2[] points, float lineWidth) { lineObjRect.sizeDelta = new Vector2(lineWidth, Mathf.Abs(points[1].y - points[3].y)); lineObjRect.anchoredPosition = new Vector2(-(selfRect.sizeDelta.x / 2f + lineWidth / 2f), 0); } protected override void GetStartDragObjPos() { startDragObjPosX = -selfRect.anchoredPosition.x - selfRect.sizeDelta.x/2f; } protected override void DragLine() { newObjDisX = startDragObjSizeDeltaX - (Input.mousePosition.x - startDragMousePos.x); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, startDragObjPosX, newObjDisX); } } #endregion #region 四个顶点 public class OutPointLeftUp : OutLine { protected override void SetAnchoredPos() { selfRect.anchorMax = new Vector2(1, 0); selfRect.anchorMin = new Vector2(1, 0); } public override void RefreshRect(Vector2[] points, float lineWidth) { lineObjRect.sizeDelta = new Vector2(lineWidth*2, lineWidth*2); lineObjRect.position = points[0]; } protected override void GetStartDragObjPos() { startDragObjPosX = -selfRect.anchoredPosition.x - selfRect.sizeDelta.x/2f ; startDragObjPosY = selfRect.anchoredPosition.y- selfRect.sizeDelta.y / 2f; } protected override void DragLine() { newObjDisX = startDragObjSizeDeltaX - (Input.mousePosition.x - startDragMousePos.x); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, startDragObjPosX, newObjDisX); newObjDisY = startDragObjSizeDeltaY + (Input.mousePosition.y - startDragMousePos.y); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, startDragObjPosY, newObjDisY); } } public class OutPointRightUp : OutLine { protected override void SetAnchoredPos() { selfRect.anchorMax = new Vector2(0, 0); selfRect.anchorMin = new Vector2(0, 0); } public override void RefreshRect(Vector2[] points, float lineWidth) { lineObjRect.sizeDelta = new Vector2(lineWidth * 2, lineWidth * 2); lineObjRect.position = points[1]; } protected override void GetStartDragObjPos() { startDragObjPosX = selfRect.anchoredPosition.x - selfRect.sizeDelta.x / 2f; startDragObjPosY = selfRect.anchoredPosition.y - selfRect.sizeDelta.y / 2f; } protected override void DragLine() { newObjDisX = startDragObjSizeDeltaX + (Input.mousePosition.x - startDragMousePos.x); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, startDragObjPosX, newObjDisX); newObjDisY = startDragObjSizeDeltaY + (Input.mousePosition.y - startDragMousePos.y); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, startDragObjPosY, newObjDisY); } } public class OutPointRightDown : OutLine { protected override void SetAnchoredPos() { selfRect.anchorMax = new Vector2(0, 1); selfRect.anchorMin = new Vector2(0, 1); } public override void RefreshRect(Vector2[] points, float lineWidth) { lineObjRect.sizeDelta = new Vector2(lineWidth * 2, lineWidth * 2); lineObjRect.position = points[2]; } protected override void GetStartDragObjPos() { startDragObjPosX = selfRect.anchoredPosition.x - selfRect.sizeDelta.x / 2f; startDragObjPosY = -selfRect.anchoredPosition.y - selfRect.sizeDelta.y/2f ; } protected override void DragLine() { newObjDisX = startDragObjSizeDeltaX + (Input.mousePosition.x - startDragMousePos.x); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, startDragObjPosX, newObjDisX); newObjDisY = startDragObjSizeDeltaY - (Input.mousePosition.y - startDragMousePos.y); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, startDragObjPosY, newObjDisY); } } public class OutPointLeftDown : OutLine { protected override void SetAnchoredPos() { selfRect.anchorMax = new Vector2(1, 1); selfRect.anchorMin = new Vector2(1, 1); } public override void RefreshRect(Vector2[] points, float lineWidth) { lineObjRect.sizeDelta = new Vector2(lineWidth * 2, lineWidth * 2); lineObjRect.position = points[3]; } protected override void GetStartDragObjPos() { startDragObjPosX = -selfRect.anchoredPosition.x - selfRect.sizeDelta.x / 2f; startDragObjPosY = -selfRect.anchoredPosition.y - selfRect.sizeDelta.y / 2f; } protected override void DragLine() { newObjDisX = startDragObjSizeDeltaX - (Input.mousePosition.x - startDragMousePos.x); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, startDragObjPosX, newObjDisX); newObjDisY = startDragObjSizeDeltaY - (Input.mousePosition.y - startDragMousePos.y); selfRect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, startDragObjPosY, newObjDisY); } } #endregion
此类中包含4个顶点，4条线段位置，尺寸等信息的计算，图方便写到了一个文件下，嘿嘿嘿
之后是一个工厂类：
public class OutLineManager : SingleMono<OutLineManager> { public OutLine GetOutLine(string key) { OutLine outLine; switch (key) { case "Up": outLine = new OutLineUp(); break; case "Right": outLine = new OutLineRight(); break; case "Down": outLine = new OutLineDown(); break; case "Left": outLine = new OutLineLeft(); break; case "LeftUp": outLine = new OutPointLeftUp(); break; case "RightUp": outLine = new OutPointRightUp(); break; case "RightDown": outLine = new OutPointRightDown(); break; case "LeftDown": outLine = new OutPointLeftDown(); break; default: outLine = null; break; } if(outLine!=null) outLine.insLineName = key; return outLine; } }
上面用了一个单例：
using System.Collections; using System.Collections.Generic; using UnityEngine; public class SingleMono<T>:MonoBehaviour where T:MonoBehaviour { private static T instance; public static T Instance { get { if (instance == null) { instance = GameObject.FindObjectOfType<T>(); } if (instance == null) { GameObject go= new GameObject("Single_" + typeof(T).ToString()); instance=go.AddComponent<T>(); } return instance; } } }
最后客户端调用：
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class InsButton : MonoBehaviour { Button self; OutLine outLineUp; OutLine outLineRight; OutLine outLineDown; OutLine outLineLeft ; OutLine outPointLeftUp; OutLine outPointRightUp; OutLine outPointLeftDown; OutLine outPointRightDown; private void Awake() { self = GetComponent<Button>(); Cursor.SetCursor(null, Vector2.zero, CursorMode.Auto); InsOutLine(); } /// <summary> /// 初始化外边框 /// </summary> void InsOutLine() { outLineUp = OutLineManager.Instance.GetOutLine("Up"); outLineRight = OutLineManager.Instance.GetOutLine("Right"); outLineDown = OutLineManager.Instance.GetOutLine("Down"); outLineLeft = OutLineManager.Instance.GetOutLine("Left"); outPointLeftUp = OutLineManager.Instance.GetOutLine("LeftUp"); outPointRightUp = OutLineManager.Instance.GetOutLine("RightUp"); outPointLeftDown = OutLineManager.Instance.GetOutLine("LeftDown"); outPointRightDown = OutLineManager.Instance.GetOutLine("RightDown"); outLineUp.Init(gameObject); outLineRight.Init(gameObject); outLineDown.Init(gameObject); outLineLeft.Init(gameObject); outPointLeftUp.Init(gameObject); outPointRightUp.Init(gameObject); outPointLeftDown.Init(gameObject); outPointRightDown.Init(gameObject); } private void Update() { Refresh(); outLineUp.RefreshRect(points, 5); outLineRight.RefreshRect(points, 5); outLineDown.RefreshRect(points, 5); outLineLeft.RefreshRect(points, 5); outPointLeftUp.RefreshRect(points, 5); outPointRightUp.RefreshRect(points, 5); outPointLeftDown.RefreshRect(points, 5); outPointRightDown.RefreshRect(points, 5); } /// <summary> /// 物体的四个边界顶点 /// </summary> Vector2[] points; /// <summary> /// 刷新获取四周的点（当前使用物体的rectTransform，后续可改为bounds） /// </summary> void Refresh() { Rect rect = self.image.rectTransform.rect; rect.position = (Vector2)self.image.rectTransform.position - rect.size / 2f; points = new Vector2[5]; GetCornerPoint(rect, out points[0], out points[1], out points[2], out points[3]); } /// <summary> /// 在编辑器中画出线 /// </summary> /// <param name="rect"></param> /// <param name="p1"></param> /// <param name="p2"></param> /// <param name="p3"></param> /// <param name="p4"></param> private void GetCornerPoint(Rect rect, out Vector2 p1, out Vector2 p2, out Vector2 p3, out Vector2 p4) { p1 = new Vector2(rect.center.x - rect.size.x / 2f, rect.center.y + rect.size.y / 2f); p2 = new Vector2(rect.center.x + rect.size.x / 2f, rect.center.y + rect.size.y / 2f); p3 = new Vector2(rect.center.x + rect.size.x / 2f, rect.center.y - rect.size.y / 2f); p4 = new Vector2(rect.center.x - rect.size.x / 2f, rect.center.y - rect.size.y / 2f); Debug.DrawLine(p1, p2, Color.blue); Debug.DrawLine(p2, p3, Color.blue); Debug.DrawLine(p3, p4, Color.blue); Debug.DrawLine(p4, p1, Color.blue); } }
工程链接：https://github.com/wtb521thl/CreatByUser/tree/Develop
