UGUI实现图片拖拽功能
这一篇博客我们来使用UGUI实现图片的拖拽功能。
说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标。),这两个坐标是不一样的,所以拖拽是就需要转换。因为鼠标的移动是屏幕坐标,而 UI 的移动是ugui坐标。转换的方法:
RectTransformUtility.ScreenPointToLocalPointInRectangle ( … );这个方法可以把屏幕坐标转换成 ugui 坐标。至于屏幕坐标和 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, 1); //设置图片缩放 Vector3 imgNormalScale = new Vector3(1, 1, 1); //正常大小 // 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; //回复图片 } }
现在就实现了简单的拖放功能。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
- 这篇文章主要为大家详细介绍了C#控件Picturebox实现鼠标拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
javascript轻量级库createjs使用Easel实现拖拽效果
这篇文章主要介绍了javascript轻量级库createjs使用Easel实现拖拽效果的相关资料,需要的朋友可以参考下...2016-02-21- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- 这篇文章主要介绍了javascript拖拽效果延伸的学习,关于拖拽延伸出来的一些效果,感兴趣的朋友可以参考一下...2016-04-06
- 这篇文章主要介绍了vue element el-transfer增加拖拽功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-16
- 这篇文章主要为大家详细介绍了Unity3D UGUI实现翻书特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- element的dialog弹框在项目中挺常用的。拖拽形式的弹框会提高用户体验,本文实现了vue可拖拽的dialog弹框,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-05-14
- 这篇文章主要介绍了js实现的简练高效拖拽功能,通过对js鼠标事件的扩展实现拖拽效果,非常简单实用,需要的朋友可以参考下...2017-01-09
- vue验证滑块功能,在生活中很多地方都可以见到,使用起来非常方便,这篇文章主要给大家介绍了关于vue实现滑块拖拽校验功能的相关资料,需要的朋友可以参考下...2021-08-04
- 这篇文章主要为大家详细介绍了JavaScript实现简单拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-15
- 这篇文章主要为大家详细介绍了JS实现鼠标按下拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-24
- 这篇文章主要介绍了C#利用控件拖拽技术制作拼图游戏的方法以及核心代码,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C# 文件拖拽和pixturBox缩放与拖拽功能,代码简单易懂,非常不错具有参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Html5原生拖拽相关事件简介以及基础实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- 本文主要介绍了vue实现页面div盒子拖拽排序功能,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-22
- 这篇文章主要介绍了jquery实现可旋转可拖拽的文字效果代码,涉及jquery响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下...2016-01-30
- 这篇文章主要为大家详细介绍了C#控件picturebox实现图像拖拽和缩放,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了原生js配合cookie制作保存路径的拖拽效果,感兴趣的小伙伴们可以参考一下...2016-01-02