Unity UGUI 效果之鼠标拖拽UI实现放大缩小，实时调整UI大小（上）

杰尼杰尼丶

已于 2024-08-02 17:05:36 修改

阅读量2.3k

点赞数 25

分类专栏：常用功能文章标签： c# unity ui

于 2024-08-02 16:38:07 首次发布

本文链接：https://blog.csdn.net/ForKnowledgeMe/article/details/140873035

版权

Unity UGUI 效果之鼠标拖拽UI实现放大缩小，实时调整UI大小

文章目录

Unity UGUI 效果之鼠标拖拽UI实现放大缩小，实时调整UI大小
前言
一、简单介绍
二、实现原理
三、效果预览
四、实现步骤
总结
五、最新更新

前言

项目中想自定义编辑一个图片进行编辑展示，涉及到需要放大缩小的功能，看了一些资料很多都是拖拽的时候整体的放大缩小，所以自己在方法思路上进行改进功能。

一、简单介绍

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

二、实现原理

1、OnPointerEnter进入图片时检测鼠标在图片的区域位置；
2、OnPointerDown鼠标按下时，关闭检测并设置为拖拽状态；
3、OnDrag拖拽时，根据鼠标的位置进行图片大小的设置；
4、OnPointerUp鼠标抬起时，关闭拖拽状态；
5、OnPointerExit鼠标离开图片时关闭掉所有的检测以及拖拽判断

通过鼠标进入图片后所处的橙色区域位置判断拖拽的方向
在这里插入图片描述

三、效果预览

在这里插入图片描述

四、实现步骤

1、UI设置

面板基本结构设置
在这里插入图片描述

对四周拖拽箭头的预设位置以及锚点设置

在这里插入图片描述

2、代码编辑

1、边缘判断

 /// <summary>
 /// 边缘判断协程
 /// </summary>
 /// <returns></returns>
 IEnumerator edgeJudge()
 {
   
     yield return new WaitForEndOfFrame();
     while (true)
     {
   
         //通过图片内部点的位置与四边的距离 判断上下左右
         RectTransformUtility.ScreenPointToLocalPointInRectangle(panelRectTransform,
             Input.mousePosition, null, 
             out v2PointEnter);
          
         //  Debug.Log("_pos:" + v2PointEnter);  
         ui_edge = GetCurrentEdge(v2PointEnter);
          
         SetActiveEdgeImage(false);

         switch (ui_edge)
         {
   
             case UI_Edge.None:
                 SetActiveEdgeImage(false);
                 break;
             case UI_Edge.Left:
                 Left_Image.gameObject.SetActive(true);
                 Left_Image.localPosition = new Vector3(Left_Image.localPosition.x, Mathf.Clamp(v2PointEnter.y, -panelRectTransform.rect.height / 2, panelRectTransform.rect.height / 2),
                     Left_Image.localPosition.z);
                 break;
             case UI_Edge.Right:
                 Right_Image.gameObject.SetActive(true);
                 Right_Image.localPosition = new Vector3(Right_Image.localPosition.x, Mathf.Clamp(v2PointEnter.y, -panelRectTransform.rect.height / 2, panelRectTransform.rect.height / 2),
                     Right_Image.localPosition.z);
                 break;
             case UI_Edge.Down:
                 Down_Image.gameObject.SetActive(true);
                 Down_Image.localPosition = new Vector3(Mathf.Clamp(v2PointEnter.x, -panelRectTransform.rect.width / 2, panelRectTransform.rect.width / 2),
                     Down_Image.localPosition.y, Down_Image.localPosition.z);

                 break;
             case UI_Edge.Top:
                 Top_Image.gameObject.SetActive(true); 
                 Top_Image.localPosition = new Vector3(Mathf.Clamp(v2PointEnter.x, -panelRectTransform.rect.width / 2, panelRectTransform.rect.width / 2),
                     Top_Image.localPosition.y, Top_Image.localPosition.z);

                 break;
             default:
                 SetActiveEdgeImage(false