Unity-UGUI实现多文档界面(MDI)

文章目录[x]
  1. 0.1:另外一种简版只有拖动和缩放

项目中有个需求,控制视频矩阵输出到大屏幕上各个区域,里面的难点是各个区域大小位置可以自由编辑。想到类似很多程序界面也是这样的逻辑就查阅相关资料,找到了可以实现一下效果的项目。

Demo:http://webgl.horse7.cn/MDI

地址:https://github.com/Reavenk/UIDock_Dev

文章:https://pixeleuphoria.com/blog/index.php/notes-on-docking-splitter-auis/


抱歉,只有登录并在本文发表评论才能阅读隐藏内容

另外一种简版只有拖动和缩放

1.建三个脚本CursorManager .cs 、UIResize.cs、UIEdgeRectangle.cs

using UnityEngine;
using System.Collections.Generic;

/// <summary>
/// 鼠标光标类型枚举
/// </summary>
public enum CursorType
{
    None,
    UpDown,//上下箭头
    LeftRight,//左右箭头
    LeftOblique,//左斜箭头
    RightOblique//右斜箭头
}

public class CursorManager : MonoBehaviour
{
    public static CursorManager instance;
    private Dictionary<CursorType, Texture2D> dicCursors = new Dictionary<CursorType, Texture2D>();

    private void Awake()
    {
        instance = this;
    }
    /// <summary>
    /// 加载鼠标光标保存到字典
    /// </summary>
    public void LoadCursor()
    {
        string[] cursors = System.Enum.GetNames(typeof(CursorType));
        for (int i = 0; i < cursors.Length; i++)
        {
            Texture2D sprite = Resources.Load<Texture2D>("cursor/" + cursors[i]);
            CursorType type = (CursorType)System.Enum.Parse(typeof(CursorType), cursors[i]);//根据字符串名转换为对应枚举类型
            if (!dicCursors.ContainsKey(type))
            {
                dicCursors.Add(type, sprite);
            }
        }
    }
    /// <summary>
    /// 根据枚举设置不同的鼠标光标
    /// </summary>
    /// <param name="type"></param>
    public void SetCursor(CursorType type)
    {
        if (dicCursors.ContainsKey(type))
        {
            //因为这里的光标图片大小是32*32像素的,所以需要设置切换光标后鼠标位置为该图片中心位置
            //即偏移为(16,16),避免在UI边缘检测时出现误差
            Cursor.SetCursor(dicCursors[type], new Vector2(16, 16), CursorMode.Auto);
        }
    }
    //恢复默认光标
    public void SetDefaultCursor()
    {
        Cursor.SetCursor(null, Vector2.zero, CursorMode.Auto);
    }
}
using UnityEngine;

//UI分成9宫格 各个边缘枚举
public enum UIEdge
{
    None,
    Up,
    Down,
    Left,
    Right,
    TopRightCorner,
    BottomRightCorner,
    TopLeftCorner,
    BottomLeftCorner
}
public static class UIEdgeRectangle
{

    public static float areaPixel = 10.0f;//边缘检测区域大小
    private static Vector3[] corners = new Vector3[4];

    /// <summary>
    /// UI边缘检测算法,获取UI边缘枚举
    /// </summary>
    /// <param name="mousePos">鼠标点</param>
    /// <param name="rect">UI矩形框</param>
    /// <returns></returns>
    public static UIEdge GetUIEdge(Vector2 mousePos, RectTransform rect)
    {
        UIEdge uiEdge = UIEdge.None;//默认是None类型:表示中心区域
        rect.GetLocalCorners(corners);//获取UI矩形四个边缘角的局部坐标
        //上方矩形区域点
        var up0 = new Vector2(corners[1].x + areaPixel, corners[1].y - areaPixel);//与左边矩形区域共用
        var up1 = new Vector2(corners[1].x + areaPixel, corners[1].y);
        var up2 = new Vector2(corners[2].x - areaPixel, corners[2].y);
        var up3 = new Vector2(corners[2].x - areaPixel, corners[2].y - areaPixel);//与右边矩形区域共用
        //下方矩形区域点
        var down0 = new Vector2(corners[0].x + areaPixel, corners[0].y);
        var down1 = new Vector2(corners[0].x + areaPixel, corners[0].y + areaPixel);//与左边矩形区域共用
        var down2 = new Vector2(corners[3].x - areaPixel, corners[3].y + areaPixel);//与右边矩形区域共用
        var down3 = new Vector2(corners[3].x - areaPixel, corners[3].y);
        //左边矩形区域点
        var left0 = new Vector2(corners[0].x, corners[0].y + areaPixel);
        var left1 = new Vector2(corners[1].x, corners[1].y - areaPixel);
        //右边矩形区域点
        var right0 = new Vector2(corners[2].x, corners[2].y - areaPixel);
        var right1 = new Vector2(corners[3].x, corners[3].y + areaPixel);

        //判断鼠标位置处于那个区域
        if (IsPointInRectangle(up0, up1, up2, up3, mousePos))
        {
            uiEdge = UIEdge.Up;//鼠标点在up0、up1、up2和up3组成的矩形区域时返回枚举类型up:表示上方
        }
        else if (IsPointInRectangle(down0, down1, down2, down3, mousePos))
        {
            uiEdge = UIEdge.Down;//鼠标点在down0、down1、down2和down3组成的矩形区域时返回枚举类型down:表示下方
        }
        else if (IsPointInRectangle(down1, left0, left1, up0, mousePos))
        {
            uiEdge = UIEdge.Left;//鼠标点在down1、left0、left1和up0组成的矩形区域时返回枚举类型left:表示左边
        }
        else if (IsPointInRectangle(up3, right0, right1, down2, mousePos))
        {
            uiEdge = UIEdge.Right;//鼠标点在up3、right0、right1和down2组成的矩形区域时返回枚举类型right:表示下方
        }
        else if (IsPointInRectangle(up3, up2, corners[2], right0, mousePos))
        {
            uiEdge = UIEdge.TopRightCorner;//鼠标点在up3、up2、corners[2]和right0组成的矩形区域时返回枚举类型TopRightCorner:表示下方
        }
        else if (IsPointInRectangle(down2, right1, corners[3], down3, mousePos))
        {
            uiEdge = UIEdge.BottomRightCorner;//鼠标点在down2、right1、corners[3]和down3组成的矩形区域时返回枚举类型BottomRightCorner:表示下方
        }
        else if (IsPointInRectangle(left1, corners[1], up1, up0, mousePos))
        {
            uiEdge = UIEdge.TopLeftCorner;//鼠标点在left1、corners[1]、up1和up0组成的矩形区域时返回枚举类型TopLeftCorner:表示下方
        }
        else if (IsPointInRectangle(corners[0], left0, down1, down0, mousePos))
        {
            uiEdge = UIEdge.BottomLeftCorner;//鼠标点在corners[0]、left1、down1和down0组成的矩形区域时返回枚举类型BottomLeftCorner:表示下方
        }
        return uiEdge;
    }

    // 计算两个向量的叉积
    public static float Cross(Vector2 a, Vector2 b)
    {
        return a.x * b.y - b.x * a.y;
    }

    // 判断点E是否在ABCD组成的矩形框内
    public static bool IsPointInRectangle(Vector2 A, Vector2 B, Vector2 C, Vector2 D, Vector2 E)
    {
        //计算E与ABCD矩形的叉积
        bool value = Cross(A - B, A - E) * Cross(C - D, C - E) >= 0 && Cross(A - D, A - E) * Cross(C - B, C - E) >= 0;
        return value;
    }
}
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
/// <summary>
/// UI拖拽拉伸
/// </summary>
public class UIResize : MonoBehaviour, IDragHandler, IPointerExitHandler,IBeginDragHandler,IPointerDownHandler,IPointerEnterHandler
{
    private Image img;//拖拽的对象
    public Camera uicam;//渲染UI的相机
    private RectTransform rect;//拖拽对象的矩形对象
    private UIEdge currentUiEdge;//当前鼠标所在UI的边缘枚举

    public float MinWidth = 100;//最小宽度
    public float MinHeight = 100;//最小高度
    private bool inRect;//是否处于rect内

    private void Start()
    {
        CursorManager.instance.LoadCursor();//初始化加载鼠标光标
        img = GetComponent<Image>();
        rect = img.GetComponent<RectTransform>();
    }

    /// <summary>
    /// 鼠标移出UI,恢复默认光标
    /// </summary>
    /// <param name="eventData"></param>
    public void OnPointerExit(PointerEventData eventData)
    {
        CursorManager.instance.SetDefaultCursor();
        inRect = false;
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        inRect = true;
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
    
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        
    }

    /// <summary>
    /// 拖拽过程中,根据鼠标所在边缘区域动态修改该UI图片的右上偏移offsetMax或左下偏移offsetMin
    /// </summary>
    /// <param name="eventData"></param>
    public void OnDrag(PointerEventData eventData)
    {
        if (rect.sizeDelta.x < MinWidth)
        {
            rect.sizeDelta = new Vector2(MinWidth,rect.sizeDelta.y);
            return;
        }
        if(rect.sizeDelta.y < MinHeight)
        {
            rect.sizeDelta = new Vector2(rect.sizeDelta.x, MinHeight);
            return;
        }

        switch (currentUiEdge)
        {
            case UIEdge.None:
                rect.anchoredPosition += eventData.delta;
                break;
            case UIEdge.Up://UI上方
                rect.offsetMax = new Vector2(rect.offsetMax.x, rect.offsetMax.y + eventData.delta.y);
                break;
            case UIEdge.Down://UI下方
                rect.offsetMin = new Vector2(rect.offsetMin.x, rect.offsetMin.y + eventData.delta.y);
                break;
            case UIEdge.Left://UI左边
                rect.offsetMin = new Vector2(rect.offsetMin.x + eventData.delta.x, rect.offsetMin.y);
                break;
            case UIEdge.Right://UI右边
                rect.offsetMax = new Vector2(rect.offsetMax.x + eventData.delta.x, rect.offsetMax.y);
                break;
            case UIEdge.TopRightCorner://UI右上角
                rect.offsetMax = rect.offsetMax + eventData.delta;
                break;
            case UIEdge.BottomRightCorner://UI右下角
                rect.offsetMax = new Vector2(rect.offsetMax.x + eventData.delta.x, rect.offsetMax.y);
                rect.offsetMin = new Vector2(rect.offsetMin.x, rect.offsetMin.y + eventData.delta.y);
                break;
            case UIEdge.TopLeftCorner://UI左上角
                rect.offsetMax = new Vector2(rect.offsetMax.x, rect.offsetMax.y + eventData.delta.y);
                rect.offsetMin = new Vector2(rect.offsetMin.x + eventData.delta.x, rect.offsetMin.y);
                break;
            case UIEdge.BottomLeftCorner://UI左下角
                rect.offsetMin = rect.offsetMin + eventData.delta;
                break;
        }
    }
    private void Update()
    {
        if (!inRect) return;
        if (RectTransformUtility.RectangleContainsScreenPoint(rect, Input.mousePosition, uicam))
        {
            Vector2 mousePos;
            //将鼠标的屏幕位置转为在该UI图片下的ui坐标
            RectTransformUtility.ScreenPointToLocalPointInRectangle(rect, Input.mousePosition, uicam, out mousePos);
            //进行UI边缘检测,判断鼠标位置在UI边缘的哪个位置,返回其边缘类型枚举
            currentUiEdge = UIEdgeRectangle.GetUIEdge(mousePos, rect);
            switch (currentUiEdge)//根据边缘类型的情况切换鼠标光标
            {
                case UIEdge.None:
                    CursorManager.instance.SetDefaultCursor();
                    break;
                case UIEdge.Up:
                    CursorManager.instance.SetCursor(CursorType.UpDown);
                    break;
                case UIEdge.Down:
                    CursorManager.instance.SetCursor(CursorType.UpDown);
                    break;
                case UIEdge.Left:
                    CursorManager.instance.SetCursor(CursorType.LeftRight);
                    break;
                case UIEdge.Right:
                    CursorManager.instance.SetCursor(CursorType.LeftRight);
                    break;
                case UIEdge.TopRightCorner:
                    CursorManager.instance.SetCursor(CursorType.RightOblique);
                    break;
                case UIEdge.BottomRightCorner:
                    CursorManager.instance.SetCursor(CursorType.LeftOblique);
                    break;
                case UIEdge.TopLeftCorner:
                    CursorManager.instance.SetCursor(CursorType.LeftOblique);
                    break;
                case UIEdge.BottomLeftCorner:
                    CursorManager.instance.SetCursor(CursorType.RightOblique);
                    break;
            }
        }
    }
}

1.把UIResize.cs挂载到带有RectTransform的物体上就可以了,为了美观我创建了一个Panel,然后又在下面创建了一些图片和文本(与要实现的功能无关)。

2.把CursorManager.cs挂载任意位置,能执行Awake就可以了。

3.导入用到的Cursor图片。

4.运行后就可以缩放和拖拽移动这个Panel了。

ps:EventSystem属性Threshold需要设的小一些,防止鼠标已经移除检测区域后才触发OnDrag(默认检测区域宽度为10,可以修改)。

点赞

发表回复

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像(已失效)