Unity开箱即用的UGUI面板的拖拽移动功能

文章目录

      • 👉一、背景
      • 👉二、效果图
      • 👉三、原理
      • 👉四、核心代码
      • 👉五,总结

👉一、背景

之前做PC项目时常常有面板拖拽移动的需求,今天总结封装一下,做成一个随时随地可复用的拖拽面板功能。

👉二、效果图

请添加图片描述

👉三、原理

实现原理也非常简单。首先继承UI事件系统下的两个接口:

IBeginDragHandler, IDragHandler

进而实现两个接口方法即可,主要是在开始拖拽事件里面,记录鼠标按下的坐标mMouseDownPosition和面板的初始坐标mPanelOriginPosition;然后在拖拽过程中鼠标在Canvas下的坐标,减去开始拖拽的鼠标坐标得到一个鼠标坐标偏移量,加上原始面板坐标得到一个新的拖拽位置的坐标,进行坐标赋值即可。

👉四、核心代码

using UnityEngine;
using UnityEngine.EventSystems;namespace Utility
{/// <summary>/// UGUI面板的拖拽移动功能/// </summary>[RequireComponent(typeof(RectTransform))]public class DragPanel : MonoBehaviour, IBeginDragHandler, IDragHandler{/// <summary>/// 静态方法,提供动态绑定拖拽面板的接口/// </summary>/// <param name="rectTransform"></param>/// <returns></returns>public static DragPanel Get(RectTransform rectTransform){DragPanel dragPanel = rectTransform.gameObject.GetComponent<DragPanel>();if (dragPanel == null){dragPanel = rectTransform.gameObject.AddComponent<DragPanel>();}return dragPanel;}/// <summary>/// 当前拖拽面板的根节点,一般是Canvas/// </summary>private RectTransform canvasRect;private Canvas rootCanvas;private Camera uiCam;/// <summary>/// 是否允许拖拽/// </summary>private bool isAllowDrag;private Vector3 mMouseDownPosition;private Vector3 mPanelOriginPosition;private void Awake(){Transform root = transform.root;if (root != null){rootCanvas = root.GetComponent<Canvas>();canvasRect = root as RectTransform;if (rootCanvas.renderMode == RenderMode.ScreenSpaceCamera){uiCam = rootCanvas.worldCamera;}}isAllowDrag = rootCanvas != null;}public void OnBeginDrag(PointerEventData eventData){if (!isAllowDrag) return;RectTransformUtility.ScreenPointToWorldPointInRectangle(canvasRect,Input.mousePosition,uiCam,out mMouseDownPosition);mPanelOriginPosition = transform.position;}public void OnDrag(PointerEventData eventData){if (!isAllowDrag) return;Vector3 currentMousePosInUGUI;RectTransformUtility.ScreenPointToWorldPointInRectangle(canvasRect,Input.mousePosition,uiCam,out currentMousePosInUGUI);transform.position = mPanelOriginPosition + (currentMousePosInUGUI - mMouseDownPosition);}}
}

食用方法:

  1. 直接将DragPanel脚本拖拽赋值给需要拖拽的UI面板。
    在这里插入图片描述

  2. 如果需要拖拽功能的UI面板多,可使用动态绑定方法,该脚本提供了一个Get方法,参数为需要拖拽的对象的RectTransform组件。
    代码动态绑定方法如下:

			RectTransform rectTransform = xxx;//需要赋值,对象不能为空哦。DragPanel.Get(rectTransform);

👉五,总结

后续可以进行优化的地方:

  • 鼠标拖拽移动可以是用平滑移动方法
  • 对拖拽范围进行限制

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38528.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

More Effective C++ 35个改善编程与设计的有效方法笔记与心得 3

三. 异常 条款9&#xff1a; 利用destructors避免泄露资源 ‌‌‌‌  在编程中&#xff0c;"资源"可以指任何系统级的有限资源&#xff0c;如内存、文件句柄、网络套接字等。"泄露"则是指在应用程序中分配了资源&#xff0c;但在不再需要这些资源时没有…

Linux 安装 Redis 教程

优质博文&#xff1a;IT-BLOG-CN 一、准备工作 配置gcc&#xff1a;安装Redis前需要配置gcc&#xff1a; yum install gcc如果配置gcc出现依赖包问题&#xff0c;在安装时提示需要的依赖包版本和本地版本不一致&#xff0c;本地版本过高&#xff0c;出现如下问题&#xff1a…

Jupyter无法导入库,但能在终端导入的问题

Jupyter无法导入库&#xff0c;但能在终端导入 ❌错误问题描述&#xff1a;conda activate LLMs激活某个Conda的环境后&#xff0c;尽管已经通过conda或者pip在这个环境中安装了一些&#x1f40d;Python的库&#xff0c;但无法在Jupyter中导入&#xff0c;却能在终端成功导入。…

京东商品详情数据接口(JD.item_get)丨京东API实时接口指南

京东商品详情API接口&#xff08;JD.item_get&#xff09;是京东开放平台提供的一个数据接口&#xff0c;用于获取京东平台上单个商品的详细信息。 通过这个接口&#xff0c;开发者可以获取到包括商品名称、品牌、产地、规格参数、价格信息、销量、评价、图片、描述等在内的详…

Node.js开发实战 视频教程 下载

ode.js开发实战 视频教程 下载 下载地址 https://download.csdn.net/download/m0_67912929/89487510 01-课程介绍.mp4 02-内容综述.mp4 03-Node.js是什么? .mp4 04-Node.js可以用来做什么?.mp4 05-课程实战项目介绍.mp4 06-什么是技术预研? .mp4 07-Node.js开发环境…

Windows 11 安装 安卓子系统 (WSA)

How to Install Windows Subsystem for Android (WSA) on Windows 11 新手教程&#xff1a;如何安装Windows 11 安卓子系统 说明 Windows Subsystem for Android 或 WSA 是由 Hyper-V 提供支持的虚拟机&#xff0c;可在 Windows 11 操作系统上运行 Android 应用程序。虽然它需…

【JS】注意考点

1.声明变量时所遵循的规则&#xff1a; (1)可以使用一个保留关键字var同时声明多个变量 (2)可以在声明变量的同时对其赋值&#xff0c; (3)如果只是声明了变量&#xff0c;并未对其赋值&#xff0c;其值就默认为 Undefined。 (4)保留关键字var可以用作for语句和for…in语句…

python基础_类

在Python中&#xff0c;类&#xff08;Class&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心概念之一。类提供了一种创建新对象的模板&#xff0c;这些对象通常被称为类的实例或对象。以下是关于Python类的一些关键点和特性&#xff1a; 定义类 类通过class关键…

PostgreSQL的系统视图pg_stat_wal

PostgreSQL的系统视图pg_stat_wal 在 PostgreSQL 数据库中&#xff0c;pg_stat_wal 视图提供了与 WAL&#xff08;Write-Ahead Logging&#xff09;日志有关的统计信息。WAL 是 PostgreSQL 用于确保数据一致性和持久性的重要机制。因此&#xff0c;监控和分析 WAL 活动对于数据…

ctfshow-web入门-命令执行(web71-web74)

目录 1、web71 2、web72 3、web73 4、web74 1、web71 像上一题那样扫描但是输出全是问号 查看提示&#xff1a;我们可以结合 exit() 函数执行php代码让后面的匹配缓冲区不执行直接退出。 payload&#xff1a; cvar_export(scandir(/));exit(); 同理读取 flag.txt cinclud…

文华财经博易大师盘立方多空波段止损画线指标公式

TT:PERIOD7; EMA120:EMA(C,120); RSV:(CLOSE-LLV(LOW,9))/(HHV(HIGH,9)-LLV(LOW,9))*100; K:SMA(RSV,3,1); D:SMA(K,3,1); J:3*K-2*D; DRAWTEXT(TT&&J<0,L,多),VALIGN0; DRAWTEXT(TT&&J>100,H,空),VALIGN2; IF(TT,EMA(C,60),NULL),RGB(255,255,2…

JavaScript数组对象 , 正则对象 , String对象以及自定义对象介绍

1. Array数组对象 数组对象是使用单独的变量名来存储一系列的值。 1.1创建一个数组 创建一个数组&#xff0c;有三种方法。 【1】常规方式: let 数组名 new Array();【2】简洁方式: 推荐使用 let 数组名 new Array(数值1,数值2,...);【3】字面:在js中创建数组使用中括号…

【ubuntu 】使用samba配置共享用户home目录和其他具体路径

目录 1 安装samba 2 修改Samba配置文件 3 增加Rose用户的samba帐号 4 重启samba 5 测试 1 安装samba 使用如下命令安装samba&#xff1a; sudo apt-get updatesudo apt-get install samba openssh-server 2 修改Samba配置文件 sudo cp /etc/samba/smb.conf /etc/samba…

试用笔记之-收钱吧安卓版演示源代码,收钱吧手机版感受

首先下载&#xff1a; https://download.csdn.net/download/tjsoft/89499105 安卓手机安装 如果有收钱吧帐号输入收钱吧帐号和密码。 如果没有收钱吧帐号点我的注册 登录收钱吧帐号后就可以把手机当成收钱吧POS机用了&#xff0c;还可以扫客服的付款码哦 源代码技术交流QQ:42…

Docker安装MySQL5

Docker安装MySQL5 前言 MySQL 是一个开源的关系型数据库管理系统&#xff0c;广泛用于各种 Web 应用程序的开发和生产环境中。MySQL 5 是 MySQL 数据库的一个较早版本&#xff0c;虽然不再是最新版本&#xff0c;但仍然被一些项目所使用和支持。 在 Docker 中安装 MySQL 5 可…

Docker 手册

帮助命令 docker 命令 --help镜像命令 docker images (-a所有 &#xff5c; -q只显示容器的ID) docker search 镜像名 docker pull 镜像名&#xff1a;版本号 docker rmi -f ID&#xff5c;镜像名&#xff1a;版本号 // 删除本地一个或多个镜像 docker rmi -f $(docker …

U盘数据恢复实战指南:原因、方案与预防措施

一、引言&#xff1a;U盘数据恢复概述 在数字化时代&#xff0c;U盘作为一种便携式存储设备&#xff0c;广泛应用于个人和企业中。然而&#xff0c;由于各种原因&#xff0c;U盘数据丢失的问题时有发生。U盘数据恢复技术便是在这种情况下应运而生&#xff0c;它帮助用户在数据…

TPS61085非同步650kHz,1.2MHz, 18.5V升压DCDC芯片

1 特点 TPS61085外观和丝印PMKI 2.3 V 至 6 V 输入电压范围 具有 2.0A 开关电流的 18.5V 升压转换器 650kHz/1.2MHz 可选开关频率 可调软启动 热关断 欠压闭锁 8引脚VSSOP封装 8引脚TSSOP封装 2 应用 手持设备 GPS接收器 数码相机 便携式应用 DSL调制解调器 PCMCIA卡 TFT LCD…

MySQL之事务特性ACID、并发事务问题、隔离级别

1、事务特性ACID 原子性&#xff1a;事务是不可分割的最小操作单元&#xff0c;要么全部成功&#xff0c;要么全部失败。一致性&#xff1a;事务完成时&#xff0c;必须使所有数据都保持一致状态。隔离性&#xff1a;数据库系统提供的隔离机制&#xff0c;保证事务在不外部并发…

Java并发编程基础知识点

目录 Java并发编程基础知识点1、线程&#xff0c;进程概念及二者的关系进程相关概念线程相关概念进程与线程的关系补充小知识点&#xff1a; 2、线程的状态Java线程的状态&#xff1a;Java线程不同状态之间的切换图示 3、Java程序中如何创建线程&#xff1f;①、继承Thread类②…