Unity UGUI 效果 之 鼠标拖拽UI实现放大缩小实时调整UI大小 Resize 的功能

 

 

Unity UGUI 效果 之 鼠标拖拽UI实现放大缩小实时调整UI大小 Resize 的功能

 

目录

Unity UGUI 效果 之 鼠标拖拽UI实现放大缩小实时调整UI大小 Resize 的功能

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

六、关键代码

---

 

一、简单介绍

UGUI，是Unity自带的 GUI 系统，有别于 NGUI；使用 UGUI 也能制作出比较酷炫的效果 。

本节介绍，使用 UGUI 通过代码实现鼠标点击拖拽UI实现动态调整图片大小的功能，方法不唯一，欢迎指正。

 

二、实现原理

1、OnPointerDown 鼠标在UI 上点击，记录变化前的大小和鼠标位置

2、OnDrag 获得鼠标拖拽的位置与之前点击鼠标位置的差值，实现大小的变化

 

三、注意事项

1、鼠标的点击位置区分左上和右下，实现，鼠标向内缩小，向外放大的效果，不然变化会很怪异

2、注意 UI 锚点都在中心位置

 

四、效果预览

 

五、实现步骤

1、打开Unity，新建一个工程

 

2、添加一个 Image，最为调整大小的 UI

 

3、这里UI 的锚点都在中心位置

 

4、在工程中新建脚本，实现点击UI，拖拽实现调整UI大小的功能

 

５、脚本挂载到　UI　上，可以根据使用情况调整限定最大最小值

 

6、运行场景，效果如上

 

六、关键代码

1、PointerDragDragUIToResize

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

namespace XANTools
{
    /// <summary>
    /// 拖拽移动UI的大小
    /// 是哟ing说明
    /// 1、点击 UI
    /// 2、拖拽UI，UI的大小就会更改变化
    /// 3、变化会在限定大小内变化
    /// </summary>
    public class PointerDragDragUIToResize : MonoBehaviour, IPointerDownHandler, IDragHandler
    {
        [Header("调整的最小值")]
        public Vector2 minSize = new Vector2(50, 50);
        [Header("调整的最大值")]
        public Vector2 maxSize = new Vector2(500, 500);

        // UI 的 RectTransform
        private RectTransform panelRectTransform;

        // 鼠标按下的时候鼠标位置转到UI的位置的大小
        private Vector2 originalLocalPointerPosition;

        // 鼠标按下的时候UI原来的大小
        private Vector2 originalSizeDelta;

        // 判断鼠标的点击位置，是左上还是右上(让变化合理（鼠标向内drag是变小，向外drag是变大）)
        private bool isUpLeft = false;

        void Awake()
        {
            panelRectTransform = transform.GetComponent<RectTransform>();

        }

        /// <summary>
        /// 鼠标按下事件
        /// </summary>
        /// <param name="data"></param>
        public void OnPointerDown(PointerEventData data)
        {
            // 记录按下鼠标变化前的大小
            originalSizeDelta = panelRectTransform.sizeDelta;

            // 记录按下鼠标的位置
            RectTransformUtility.ScreenPointToLocalPointInRectangle(panelRectTransform, data.position, data.pressEventCamera, out originalLocalPointerPosition);

            // 判断鼠标的点击位置(对角线法)
            if ((originalLocalPointerPosition.x - originalLocalPointerPosition.y) < 0)
            {
                isUpLeft = true;

            }
            else
            {
                isUpLeft = false;

            }
        }

        /// <summary>
        /// 拖拽事件
        /// </summary>
        /// <param name="data"></param>
        public void OnDrag(PointerEventData data)
        {
            // UI 的安全校验
            if (panelRectTransform == null)
                return;

            // Drag 变化的变量
            Vector2 localPointerPosition;
            RectTransformUtility.ScreenPointToLocalPointInRectangle(panelRectTransform, data.position, data.pressEventCamera, out localPointerPosition);

            // Drag 变化值于鼠标按下拖拽前的值之间的差值
            Vector3 offsetToOriginal = localPointerPosition - originalLocalPointerPosition;

            // UI RectTransform 差值变化 （注意左上和右下的区别对待）
            Vector2 sizeDelta = originalSizeDelta + new Vector2(offsetToOriginal.x, -offsetToOriginal.y) * (isUpLeft == true ? -1 : 1);
            sizeDelta = new Vector2(
                    Mathf.Clamp(sizeDelta.x, minSize.x, maxSize.x),
                    Mathf.Clamp(sizeDelta.y, minSize.y, maxSize.y)
            );

            // 赋值，实现大小调整
            panelRectTransform.sizeDelta = sizeDelta;
        }


    }
}