Unity UGUI 实现简单拖拽功能
说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI
在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换。
因为鼠标的移动是屏幕坐标,而 UI
的移动是ugui坐标。转换的方法:
RectTransformUtility.ScreenPointToLocalPointInRectangle ( …
);
这个方法可以把屏幕坐标转换成 ugui 坐标。这里我们只需要知道 UI 的坐标和鼠标的坐标是不一样的,他们之间的相互移动需要转换就行了。
既然需要转换,就少不了使用方法。所以这里有一些官方的 UGUI监听事件:
要给控件添加以上的监听事件,有三种方法:
1:编写一个类,实现上面的接口(知道用哪个,实现哪个),给空间添加此脚本。
2:添加EventTrigger这个组件。
添加想要添加的监听
然后就像给Buttong添加监听一样添加方法就行。
3:程序动态添加。
这里我使用第一种方法。新建一个 2D项目。场景中添加一张图片(不一定要图片,其他控件也行),然后给图片添加脚本,名为MyDrag,编辑:
- using UnityEngine;
- using UnityEngine.EventSystems;
- using System.Collections;
- using System;
- //给空间添加监听事件要实现的一些接口
- public class MyDrag : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler,
- IEndDragHandler, IPointerEnterHandler, IPointerExitHandler
- {
- public RectTransform canvas; //得到canvas的ugui坐标
- private RectTransform imgRect; //得到图片的ugui坐标
- Vector2 offset = new Vector3(); //用来得到鼠标和图片的差值
- Vector3 imgReduceScale = new Vector3(0.8f, 0.8f, ); //设置图片缩放
- Vector3 imgNormalScale = new Vector3(, , ); //正常大小
- // Use this for initialization
- void Start()
- {
- imgRect = GetComponent<RectTransform>();
- }
- //当鼠标按下时调用 接口对应 IPointerDownHandler
- public void OnPointerDown(PointerEventData eventData)
- {
- Vector2 mouseDown = eventData.position; //记录鼠标按下时的屏幕坐标
- Vector2 mouseUguiPos = new Vector2(); //定义一个接收返回的ugui坐标
- //RectTransformUtility.ScreenPointToLocalPointInRectangle():把屏幕坐标转化成ugui坐标
- //canvas:坐标要转换到哪一个物体上,这里img父类是Canvas,我们就用Canvas
- //eventData.enterEventCamera:这个事件是由哪个摄像机执行的
- //out mouseUguiPos:返回转换后的ugui坐标
- //isRect:方法返回一个bool值,判断鼠标按下的点是否在要转换的物体上
- bool isRect = RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas, mouseDown, eventData.enterEventCamera, out mouseUguiPos);
- if (isRect) //如果在
- {
- //计算图片中心和鼠标点的差值
- offset = imgRect.anchoredPosition - mouseUguiPos;
- }
- }
- //当鼠标拖动时调用 对应接口 IDragHandler
- public void OnDrag(PointerEventData eventData)
- {
- Vector2 mouseDrag = eventData.position; //当鼠标拖动时的屏幕坐标
- Vector2 uguiPos = new Vector2(); //用来接收转换后的拖动坐标
- //和上面类似
- bool isRect = RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas, mouseDrag, eventData.enterEventCamera, out uguiPos);
- if (isRect)
- {
- //设置图片的ugui坐标与鼠标的ugui坐标保持不变
- imgRect.anchoredPosition = offset + uguiPos;
- }
- }
- //当鼠标抬起时调用 对应接口 IPointerUpHandler
- public void OnPointerUp(PointerEventData eventData)
- {
- offset = Vector2.zero;
- }
- //当鼠标结束拖动时调用 对应接口 IEndDragHandler
- public void OnEndDrag(PointerEventData eventData)
- {
- offset = Vector2.zero;
- }
- //当鼠标进入图片时调用 对应接口 IPointerEnterHandler
- public void OnPointerEnter(PointerEventData eventData)
- {
- imgRect.localScale = imgReduceScale; //缩小图片
- }
- //当鼠标退出图片时调用 对应接口 IPointerExitHandler
- public void OnPointerExit(PointerEventData eventData)
- {
- imgRect.localScale = imgNormalScale; //回复图片
- }
- }
现在就实现了简单的拖放功能。
Unity UGUI 实现简单拖拽功能的更多相关文章
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- WPF简单拖拽功能实现
1.拖放操作有两个方面:源和目标. 2.拖放操作通过以下三个步骤进行: ①用户单击元素,并保持鼠标键为按下状态,启动拖放操作. ②用户将鼠标移到其它元素上.如果该元素可接受正在拖动的内容的类型,鼠标指 ...
- 使用UGUI实现拖拽功能(拼图小游戏)
实现方式 1.引入UGUI自带的事件系统 UnityEngine.EventSystems 2.为我们的类添加接口 IBeginDragHandler, IDragHandler, IEndDragH ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- 使用NGUI实现拖拽功能(拼图小游戏)
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...
- React Editor 应用编辑器(1) - 拖拽功能剖析
这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...
- RCP:拖拽功能的实现 Drag and Drop
SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...
- duilib中控件拖拽功能的实现方法(附源码)
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
随机推荐
- hadoop,hbase,hive安装全记录(转)
http://wenku.baidu.com/view/5eb3b4a6f90f76c661371abe.html 或http://blog.csdn.net/chengweipeng123/arti ...
- Vue 源码 基础知识点
1.数据类型判断 const _toString = Object.prototype.toString function toRawType(value) { return _toString.ca ...
- 【BIRT】交叉报表中出现空值设置为默认值
在使用BIRT做交叉报表的时候,往往会出现有些维度下的值是空值,例如如下报表: 那么我们可以为这些空值给出默认值,例如"-" 具体操作如下: 点击上图的[Cross Tab]后选中 ...
- spring注解 annotation
@Resourse(name=" xxx") 意味从上下文找xxx名字一样的然后引入 @Repository("personDao") 意味生成一个 bean ...
- C#:ZedGraph画图控件(待补充)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- string 类简介和例程
一.标准库string类型 string类型支持长度可变的字符串,C++标准库将负责管理与存储字符相关的内存,以及提供各种有用的操作 ,在VC中直接F1查看 template < class C ...
- 11g RAC 加节点 之 手动加入vip 资源
今天在给一套2节点rac 加入一个节点3时碰到几个问题: 1.原生产rac 环境私网网卡,没有使用多张冗余网卡,为保证gi 稳定性,禁用了haip: but ,埋下了一个不是坑的坑!!!!!!!!!! ...
- C# AutoResetEvent
文章转载自:C# AutoResetEvent AutoResetEvent 常常被用来在两个线程之间进行信号发送 AutoResetEvent是.net线程简易同步方法中的一种,两个线程共享相同的A ...
- 怎么使用Firefox的RestClient
- vsftp 无法启动,500 OOPS: bad bool value in config file for: anonymous_enable
朋友的FTP启动不了,叫我帮他看,启动时出现以下错误信息: 500 OOPS: bad bool value in config file for: anonymous_enable 看似配置文件错误 ...