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

叁歲伎倆 2022-12-01 15:50 750阅读 0赞

![20200828095021828.png][]

# 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 锚点都在中心位置

## 四、效果预览 ##

![2020082810002510.gif][]

## 五、实现步骤 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

6、运行场景，效果如上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

## 六、关键代码 ##

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;
            }
    
    
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6][]

[20200828095021828.png]: /images/20221123/3afc148d086e46e187e7ccf14d9b978f.png
[2020082810002510.gif]: /images/20221123/bcae60ef702f4d07a069d1fa10235d70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20221123/0fecf925d16a4c2dae33d36d82ed0c97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20221123/319f89ec946f4536825bc287951a3e1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20221123/6702478a0779418fa584395d393eb7a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20221123/3f318afb64bc44b9ab85b2b095ce4a7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20221123/23d03e57108549818364e8e082efdfdd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20221123/7dfbedf017254f868de1c0ed8a66b92a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20221123/0946a1b23ffe4979b4b1176aaa82aa25.png