说到拖拽,那必然离不开坐标,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 实现简单拖拽功能的更多相关文章

  1. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  2. WPF简单拖拽功能实现

    1.拖放操作有两个方面:源和目标. 2.拖放操作通过以下三个步骤进行: ①用户单击元素,并保持鼠标键为按下状态,启动拖放操作. ②用户将鼠标移到其它元素上.如果该元素可接受正在拖动的内容的类型,鼠标指 ...

  3. 使用UGUI实现拖拽功能(拼图小游戏)

    实现方式 1.引入UGUI自带的事件系统 UnityEngine.EventSystems 2.为我们的类添加接口 IBeginDragHandler, IDragHandler, IEndDragH ...

  4. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  5. 使用NGUI实现拖拽功能(拼图小游戏)

    上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...

  6. React Editor 应用编辑器(1) - 拖拽功能剖析

    这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...

  7. RCP:拖拽功能的实现 Drag and Drop

    SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...

  8. duilib中控件拖拽功能的实现方法(附源码)

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...

  9. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

随机推荐

  1. 显示游戏FPS帧率的几种计算方式

    FPSDisplay.cs using UnityEngine; using System.Collections; public class FPSDisplay : MonoBehaviour { ...

  2. Js中/g \s 什么意思

    Js中/g \s 什么意思 js里elm.value.replace(/[\s ]+/g, ''),是什么意思 比如/[\s]是什么意思 elm是表单吧.将elm表单的值中的空白字符替换 replac ...

  3. CallableStatement简单使用

    直接上存储过程.函数 --运行不带參数但带返回值的存储过程 CREATE OR REPLACE PROCEDURE proc_getUserCount(v_totalCount OUT NUMBER) ...

  4. 【转载】php如何给APP端写接口

    如何写好接口 目的:清楚明白所写接口的用途 安全性:做好接口的安全性,防止接口数据泄露,做好必要的参数加密措施 按需分配: 接受值和返回值要实用,不接受和返回不需要的数据,返回值返回什么应与使用者时时 ...

  5. mysql(表类型的选择)

    1.查询mysql所支持的存储引擎 第一种方法:show engines \G

  6. postgresql一般crud存储过程参考[转]

    http://blog.csdn.net/cdnight/article/details/18082255 这里是一份经过再三调试测试而成功的postgres数据库单表crud存储过程,请注意,对于多 ...

  7. C#指南,重温基础,展望远方!(9)C#接口

    接口定义了可由类和结构实现的协定. 接口可以包含方法.属性.事件和索引器. 接口不提供所定义的成员的实现代码,仅指定必须由实现接口的类或结构提供的成员. 接口可以采用多重继承. 在以下示例中,接口 I ...

  8. eclipse项目引用项目方法

    在Java Build Path中将被引用项目Add加入到引用项目中. 在Deployment Assembly中将被引入项目Add加到配置项中. 这样在项目发布到tomcat中时被引入项目会被打成j ...

  9. Lintcode---克隆二叉树

    深度复制一个二叉树. 给定一个二叉树,返回一个他的 克隆品 . 您在真实的面试中是否遇到过这个题? Yes 样例 给定一个二叉树: 1 / \ 2 3 / \ 4 5 返回其相同结构相同数值的克隆二叉 ...

  10. nginx Beginner’s Guide

    这个引导给nginx做了一个基本的介绍,并描述了nginx可以做的一些基本事情. 假设nginx已经安装在了读者的电脑上,如果没有请查看官网安装页. 这个引导描述了怎么去开始和结束nginx,从新加载 ...