unity 鼠标控制UI大小

已于 2024-01-27 01:15:28 修改
阅读量602 收藏 9
点赞数 7
文章标签： unity ui
于 2024-01-08 10:20:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42957107/article/details/135450069
版权
文章介绍了如何在Unity中使用自定义组件实现UI大小的动态调整，支持单行或单列布局，通过鼠标拖拽调整UI元素的尺寸，同时提供锚点和最大/最小值设置。
摘要由CSDN通过智能技术生成

unity 鼠标控制UI大小(类似unity编辑器界面的界面大小拖拽效果)

效果展示

Unity-UI大小控制

组件介绍

组件属性面板

  1. 组件添加在UI组件上后，向rectTransforms中添加子物体页面
  2. 设置UI的模式SetType：横向排列、纵向排列
  3. 设置鼠标样式：不同的UI模式，需要不同的图片。Cursor.SetCursor无法设置鼠标样式图片的旋转
  4. 该组件所在游戏物体被隐藏，或者无需交互时，最好将该组件.enable=false，因为在该组件的Update中存在鼠标交互检测逻辑
  5. UI布局示例（子UI需要填满父物体UI，组件只负责修改子物体UI的锚点、轴心）
    在这里插入图片描述在这里插入图片描述

代码

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Assertions;
/// <summary>
/// UI通过鼠标动态大小调整工具
/// 1.只能调整单行或者单列布局的UI
/// 2.鼠标放置在两个UI的交界处，按下鼠标左键，左右拖拽即可调整UI大小
/// 3.每个UI元素可以设置最大最小值。该值跟据设置的SetType类型自动应用成最小/大的高或宽。
/// </summary>
public class ChangeUISize : MonoBehaviour
{
    [Serializable]
    enum SetType
    {
        Horizontal,
        Vertical,
    }
    [Serializable]
    public enum TargetArea
    {
        none,
        top,
        left,
    }

    [Serializable]
    class UiInfo
    {
        public RectTransform rect;
        public float minSize;
        public float _curVal;
        public float CurVal
        {
            get
            {
                _curVal = setType == SetType.Horizontal ? rect.rect.width : rect.rect.height;
                return _curVal;
            }
            set
            {
                _curVal = value;
                rect.sizeDelta = setType == SetType.Horizontal ? new Vector2(_curVal, rect.sizeDelta.y) : new Vector2(rect.sizeDelta.x, _curVal);
            }
        }
        public float maxSize;
        public TargetArea curPressed;
        Dictionary<TargetArea, RectTransform> rects;
        public SetType setType;

        [NonSerialized] public UiInfo last = null;
        [NonSerialized] public UiInfo next = null;

        public void Init(SetType _setType, UiInfo _last, UiInfo _next, float maxWidth = 1920, float maxHeight = 1080)
        {
            curPressed = TargetArea.none;
            setType = _setType;
            last = _last;
            next = _next;
            _curVal = setType == SetType.Horizontal ? rect.rect.width : rect.rect.height;

            minSize = minSize <= 10 ? 10 : minSize;
            maxSize = maxSize == 0 ? (setType == SetType.Horizontal ? maxWidth : maxHeight) : maxSize;
            LoadAllPrefab();
            rects ??= new();
            rects.Clear();

            //添加鼠标响应区域的Rect（本质上是一个只有RectTransform的空物体）
            switch (_setType)
            {
                case SetType.Horizontal:
                    if (last != null)
                        rects.Add(TargetArea.left, GameObject.Instantiate(prefabs[TargetArea.left], rect).transform as RectTransform);
                    break;
                case SetType.Vertical:
                    if (last != null)
                        rects.Add(TargetArea.top, GameObject.Instantiate(prefabs[TargetArea.top], rect).transform as RectTransform);
                    break;
            }

            //修改Ui的锚点模式、轴点
            if (next != null)
            {
                rect.anchorMin = setType == SetType.Horizontal ? new Vector2(0, 0) : new Vector2(0, 1);
                rect.anchorMax = setType == SetType.Horizontal ? new Vector2(0, 1) : new Vector2(1, 1);
                rect.pivot = setType == SetType.Horizontal ? new Vector2(0, rect.pivot.y) : new Vector2(rect.pivot.x, 1);
            }
            else
            {
                rect.anchorMin = setType == SetType.Horizontal ? new Vector2(1, 0) : new Vector2(0, 0);
                rect.anchorMax = setType == SetType.Horizontal ? new Vector2(1, 1) : new Vector2(1, 0);
                rect.pivot = setType == SetType.Horizontal ? new Vector2(1, rect.pivot.y) : new Vector2(rect.pivot.x, 0);
            }
        }

        static Dictionary<TargetArea, GameObject> prefabs = null;

        static void LoadAllPrefab()
        {
            if (prefabs != null)
            {
                return;
            }

            prefabs = new Dictionary<TargetArea, GameObject>
            {
                { TargetArea.left, ResourcesLoad.LoadResources<GameObject>("Prefabs/MapEditor/UISizeChange/left") },
                { TargetArea.top, ResourcesLoad.LoadResources<GameObject>("Prefabs/MapEditor/UISizeChange/top") },
            };
        }

        public RectTransform GetPreseedRect(Vector2 mousePos)
        {
            foreach (var item in rects)
            {
                if (RectTransformUtility.RectangleContainsScreenPoint(item.Value, mousePos))
                {
                    curPressed = item.Key;
                    return item.Value;
                }
            }

            curPressed = TargetArea.none;
            return null;
        }

        public bool ChangeSize(float aimSize, ref float curChangedVal)
        {
            //ui修改总值满足条件，完成递归
            if (curChangedVal + aimSize == 0)
            {
                return true;
            }
            //计算预计值
            float tmpVal = Mathf.Clamp(_curVal - Mathf.Abs(aimSize - curChangedVal), minSize, maxSize);

            //判断是不是首尾的UI（要根据UI扩展的方向来判断首、尾）
            if ((aimSize > 0 && next == null) || (aimSize < 0 && last == null))
            {
                //若是首尾UI，则必须返回true，不管此时curChangedVal与aimSize是否相等，都要返回true
                //判断首尾UI大小是否还有改变的余地，有则修改
                if (tmpVal != _curVal)
                {
                    float tmpChangedVal = tmpVal - _curVal;  //当前UI修改量
                    curChangedVal += tmpChangedVal;         //累加修改量

                    CurVal = tmpVal;
                }
                return true;
            }
            //当前UI无法再修改了，进行递归，让后续UI接着修改
            if (tmpVal == _curVal)
            {
                //return next.ChangeSize(aimSize, ref curChangedVal);
                if (aimSize > 0)
                {
                    return next.ChangeSize(aimSize, ref curChangedVal);
                }
                else
                {
                    return last.ChangeSize(aimSize, ref curChangedVal);
                }
            }
            //当前UI可以修改时
            else
            {
                float tmpChangedVal = tmpVal - _curVal;  //当前UI修改量
                curChangedVal += tmpChangedVal;         //累加修改量

                //修改UI大小
                CurVal = tmpVal;
                //若当前UI可修改大小+之前UI累计修改大小 = aimSize，则返回true，结束递归
                if (curChangedVal + aimSize == 0)
                {
                    return true;
                }
                //若为满足aimSize，则继续递归
                else
                {
                    //return next.ChangeSize(aimSize, ref curChangedVal);
                    if (aimSize > 0)
                    {
                        return next.ChangeSize(aimSize, ref curChangedVal);
                    }
                    else
                    {
                        return last.ChangeSize(aimSize, ref curChangedVal);
                    }
                }
            }
        }
    }
    [SerializeField, Tooltip("灵敏度")] float sensitivity = 500f;
    [SerializeField] float pageMaxWidth;
    [SerializeField] float pageMaxHeight;
    [SerializeField] SetType setType;
    [SerializeField] Texture2D mouseSprite;
    [SerializeField, Tooltip("ui必须按照从左到右、从上到下的顺序依次添加")] UiInfo[] rectTransforms;

    static List<ChangeUISize> parentChangeUISizes = new();
    static ChangeUISize firstActive = null;
    void Start()
    {
        parentChangeUISizes.Add(this);
        pageMaxWidth = (transform as RectTransform).rect.width;
        pageMaxHeight = (transform as RectTransform).rect.height;

        Assert.IsTrue(rectTransforms.Length >= 2, "该组件内，控制的UI数量必须 size>=2");
        rectTransforms[0].Init(setType, null, rectTransforms[1], pageMaxWidth, pageMaxHeight);
        for (int i = 1; i < rectTransforms.Length - 1; i++)
        {
            rectTransforms[i].Init(setType, rectTransforms[i - 1], rectTransforms[i + 1], pageMaxWidth, pageMaxHeight);
        }
        rectTransforms[rectTransforms.Length - 1].Init(setType, rectTransforms[rectTransforms.Length - 2], null, pageMaxWidth, pageMaxHeight);
    }

    //不能序列化，序列化之后无法等于null（序列化时unity会给一个new()的空白对象）
    [NonSerialized] UiInfo selectedRect = null; 
    void Update()
    {
        Vector3 mousePosition = Input.mousePosition;
        
        if (Input.GetMouseButtonDown(0))
        {
            selectedRect = null;
            for (int i = 0; i < rectTransforms.Length; i++)
            {
                if (rectTransforms[i].GetPreseedRect(mousePosition))
                {
                    selectedRect = rectTransforms[i];
                    break;
                }
            }
        }
        else if (Input.GetMouseButtonUp(0))
        {
            selectedRect = null;
        }

        if (!Input.GetMouseButton(0))
        {
            SetMouseSprite(mousePosition);
        }
        else if (selectedRect != null && Input.GetMouseButton(0)) 
        {
            float offset = (setType == SetType.Horizontal ? Input.GetAxis("Mouse X") : -Input.GetAxis("Mouse Y")) * sensitivity * Time.deltaTime;
            if (offset != 0)
            {
                float curMovedVal = 0;
                //修改UI
                SetUISize(offset, ref curMovedVal);
            }
        }
    }
 
    /// <summary>
    /// 修改Ui的size
    /// </summary>
    /// <param name="aimMovedVal">需要修改的UI大小</param>
    /// <param name="curMovedVal">当前已修改的大小</param>
    /// <returns></returns>
    bool SetUISize(float aimMovedVal, ref float curMovedVal)
    {
        if (selectedRect == null) 
        {
            return false;
        }
        //Debug.Log($"SetUISize({index}, {aimMovedVal})");

        if (aimMovedVal < 0)
        {
            selectedRect.last.ChangeSize(aimMovedVal, ref curMovedVal);
        }
        else
        {
            selectedRect.ChangeSize(aimMovedVal, ref curMovedVal);
        }
        if (curMovedVal != 0) 
        {
            if (aimMovedVal > 0) 
            {
                selectedRect.last.CurVal += (-curMovedVal);
            }
            else
            {
                selectedRect.CurVal += (-curMovedVal);
            }
            
            //UI的大小有过修改，但是ChangeSize只负责调整大小，UI的位置不作调整，在此处重新调整UI位置(最后一个UI锚点设置的不同，不需调整位置，只需要调整大小)
            float pos = 0;
            for (int i = 0; i < rectTransforms.Length - 1; i++)
            {
                rectTransforms[i].rect.anchoredPosition = setType == SetType.Horizontal ? 
                    new Vector2(pos, rectTransforms[i].rect.anchoredPosition.y)  : new Vector2(rectTransforms[i].rect.anchoredPosition.x, pos);
                pos += setType == SetType.Horizontal ? rectTransforms[i].rect.rect.width : rectTransforms[i].rect.rect.height;
            }
        }

        return true;
    }

    bool SetMouseSprite(Vector3 mousePos)
    {
        //确保只有一个组件在检测鼠标是否需要改变样式（一个大的页面中，可能存在多个组件同时存在，会导致鼠标一直闪烁）
        if (firstActive != null && firstActive != this && !firstActive.isActiveAndEnabled)
        {
            return false;
        }
        //选出一个当前用于遍历鼠标位置的活跃组件
        for (int i = 0;i < parentChangeUISizes.Count; i++)
        {
            if (parentChangeUISizes[i].isActiveAndEnabled)
            {
                firstActive = parentChangeUISizes[i];
            }
        }
        //遍历鼠标位置
        for (int i = 0; i < parentChangeUISizes.Count; i++)
        {
            if (!parentChangeUISizes[i].isActiveAndEnabled)
            {
                continue;
            }
            for (int j = 0; j < parentChangeUISizes[i].rectTransforms.Length; j++)
            {
                var rect = parentChangeUISizes[i].rectTransforms[j].GetPreseedRect(mousePos);
                if (rect != null)
                {
                    Cursor.SetCursor(parentChangeUISizes[i].mouseSprite, new Vector2(16, 16), CursorMode.Auto);
                    return true;
                }
            }
        }
        Cursor.SetCursor(null, Vector2.zero, CursorMode.Auto);
        return false;
    }
}
空城不醉
关注
unity鼠标控制参数大小
JavaBigData的博客
11-11 250
选中参数，变蓝了 拖动鼠标
Unity之UI、模型跟随鼠标移动（自适应屏幕分辨率、锚点、pivot中心点）
qq_42345116的博客
11-05 3594
UI跟随鼠标移动， 动态修改屏幕分辨率、锚点、pivot等参数也不会受到影响。同时脚本中包含3d物体跟随ui位置、鼠标位置移动。
Unity修改鼠标指针大小
最新发布
weixin_43834973的博客
10-16 371
你可以在win11中打开画图软件重设图片大小，调整像素即可，（32、48、64、128都可以）鼠标指针只有在这个ForceSoftware模式下，修改鼠标指针图片的像素才可以改变其大小。Cursor Hotspot:鼠标指针偏移量默认（0,0,0）修改texture Type为 Cursor。Default Cursor 鼠标指针图标。
Unity学习：对UI移入移出时改变鼠标样式及大小
ThreePointsHeat的博客
08-07 7107
项目做得差不多，闲来无事，分享一下自己在项目中用到的小技巧。 需求：鼠标在Button上移入移出时，改变光标的样式及大小。 第一步：将图片导入Unity工程中，并改变图片类型和大小 将图片类型改为Cursor（光标）类型，然后将图片的MaxSize改为32，unity中Cursor最小是32 * 32（据我发现是这样的）， 然后点击Apply。最好是把图片导入到Rescources文件...
Unity UGUI 效果 之 鼠标拖拽UI实现放大缩小，实时调整UI大小（下）
ForKnowledgeMe的博客
08-02 608
上一篇我们设置的UI的拖拽功能，这一篇我们通过对UI的anchoredPosition和sizeDelta的设置实现单方向的放大缩小功能。以上就是本次功能设计实现的全部内容了，满足图片能够在单方向上进行拖动缩放，制作不易，多多支持。
unity3d改变鼠标的样式 设置光标形状
06-07
unity3d改变鼠标的样式 设置光标形状 用GUI实现的可能效率有点差 能播动画图标 基本上现在的作法也只有这样了 不然网页上不能用 还要考虑多平台的问题
Unity中UI和粒子特效之间的遮挡以及遮罩功能
02-20
1. **使用Graphic Raycaster**：Graphic Raycaster是Unity用于处理UI交互的一种方式，它可以检测鼠标或触摸输入是否落在UI元素上。当粒子系统遮挡UI时，启用Graphic Raycaster并设置正确的事件传递顺序，可以确保...
Unity3D魔幻风格游戏UI界面按钮图标素材
04-25
6. **集成到Unity**：在Unity中，可以通过Unity的Asset Store导入这些素材，然后使用Unity的内置工具，如Unity编辑器的Inspector面板，调整按钮和图标的大小、位置、透明度等属性。 7. **动画和交互**：为了增加...
【ClickZoomUI】Unity图片根据鼠标位置使用滚轮缩放
01-12
Unity二维图片查看，完整工程Demo； 使用滚轮缩放，缩放位置根据鼠标点确定。
unity UI导航（键盘手柄鼠标）
06-07
Unity UI导航系统是游戏开发中的重要组成部分，它允许玩家通过各种输入设备，如键盘、手柄或鼠标，与游戏界面进行交互。在这个项目中，开发者已经实现了一个自定义的UI导航系统，支持手柄、按键和鼠标操作。下面将...
UnityC#，鼠标旋转，等比放大缩小，按键移动
03-28
鼠标左键旋转，右键等比放大缩小，滚动滚轮放大缩小，按下滚轮相机上下移动，按键WASD移动。
Unity 代码设置UI尺寸的一种方法
ForXz的博客
01-19 6024
计算设置sizeDelta 设置UI尺寸
Unity5 更改鼠标样式
Smile__Go的博客
04-29 8568
Unity5 改变鼠标样式方法
Unity UI -- （3）管理屏幕大小和锚点
vivo01的专栏
05-18 5417
为何我们需要锚点？现在我们已经将设置按钮放到了屏幕的某个角落了。一切看起来似乎很美好，但如果我们移动游戏视图窗口的边界，增加或减少屏幕的大小，按钮会飘到我们不想要的位置上去。如果屏幕太小，按钮会飘出屏幕外。如果屏幕太大，按钮则会靠近中心位置。Canvas的锚点系统控制着这种移动。每个Canvas上的UI元素都锚定到了其父物体上的一个特定的位置，当屏幕大小改变时它会相对于这个位置移动。锚点可视化在场景视图的工具栏中，选择Rect工具（或在场景视图中按键盘的T键），然后选择设置按钮游戏物体。
Unity运行时鼠标修改图片位置和大小
weixin_43149049的博客
03-06 4402
Unity运行时鼠标修改图片位置和大小 像微信截图一样的鼠标放在边缘可修改大小 放到中间可修改位置 有兴趣的朋友拿去用 拿去看下 首先创建一个UGUI image 然后将这个image的pivot 和anchor设置为左上角 最后Image挂上这个脚本 然后运行即可 这里参考了某些大神的博客 感谢这些大神 动态改变UGUI元素 http://www.nihao6.cn/archives/397 ...
unity改变鼠标的两种方法
qq_34845917的博客
09-26 1556
方法一：换鼠标贴图，将贴图设置成Cursor using UnityEngine; using System.Collections; public class MouseManage : MonoBehaviour { public Texture2D cursorTexture; // Use this for initialization void Start () {
Unity 鼠标控制 UI 放大、缩小、拖拽
明明明的博客
08-14 1494
Unity 鼠标控制 UI 放大、缩小、拖拽
unity3D怎样用键盘控制视野，鼠标缩放大小（塔防游戏）
qq_42542321的博客
01-24 322
public float movespeed = 24; public float mousespeed = 600; // Update is called once per frame void Update () { float h = Input.GetAxis("Horizontal"); float v = Input.GetAxis("Vertical"); float mouse = Input.GetAxis("Mouse ScrollWheel");
Unity Cursor（光标设置）
qq_24977805的博客
03-12 5683
Static Properties 静态属性 lockState 确定硬件指针是锁定到视图中心、受限于窗口还是根本不受限。 visible 确定硬件指针是否可见。 CursorLockMode（给lockState赋值的） 名称 介绍 None 鼠标解除修改（限制），并恢复显示 Locked 将光标锁定到Game窗口的中心，并隐藏 Confined 将光标限制在Game窗口中，并显示 Stat
unity实现拖拽ui窗口大小
08-11
Unity实现拖拽UI窗口大小的方法可以通过以下步骤完成： Step 1: 添加UI元素 首先，我们需要在场景中添加一个UI元素（例如Panel）用作窗口容器，并且为该UI元素添加一个可拖拽的组件（例如Draggable）。 Step 2: 编写脚本 接下来，我们需要编写一个脚本来实现拖拽UI窗口大小的功能。在该脚本中，我们需要获取到鼠标的位置，并将其与窗口的初始位置进行比较，从而计算出窗口的大小。 Step 3: 实现拖拽逻辑 在拖拽脚本中，我们可以通过在Update函数中使用Input.mousePosition来获取鼠标的位置。然后，我们可以使用RectTransform组件来获取UI元素的初始位置和大小，并计算出UI元素的新位置和大小。 Step 4: 更新UI元素 最后，在拖拽逻辑中，我们需要将计算出的新位置和大小应用到UI元素上。这可以通过设置RectTransform组件的position和sizeDelta属性来实现。 通过以上步骤，我们就可以实现拖拽UI窗口大小的功能了。当我们在场景中操作该UI元素时，它会根据鼠标的位置自动调整自身的大小。这样，我们就可以方便地调整UI窗口的大小，以适应不同的需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值