UGUI实现图片拖拽功能_C#

这一篇博客我们来使用ugui实现图片的拖拽功能。

说到拖拽，那必然离不开坐标，ugui 的坐标有点不一样，它有两种坐标，一种是屏幕坐标，还有一种就是 ui 在canvas内的坐标（暂时叫做ugui坐标。），这两个坐标是不一样的，所以拖拽是就需要转换。因为鼠标的移动是屏幕坐标，而 ui 的移动是ugui坐标。转换的方法：

recttransformutility.screenpointtolocalpointinrectangle ( … );这个方法可以把屏幕坐标转换成 ugui 坐标。至于屏幕坐标和 ugui 坐标的区别、转换之类的我就不讲了，因为我也是一头雾水，怕我说了你们直接关浏览器了。

这里我们只需要知道 ui 的坐标和鼠标的坐标是不一样的，他们之间的相互移动需要转换就行了。

既然需要转换，就少不了使用方法。所以这里有一些官方的 ugui监听事件：

UGUI实现图片拖拽功能

（我就不献丑翻译了，英语还是有点渣。）

要给控件添加以上的监听事件，有三种方法：

1、编写一个类，实现上面的接口（用哪个，实现哪个），给空间添加此脚本。

2、添加eventtrigger这个组件

UGUI实现图片拖拽功能

添加想要添加的监听

UGUI实现图片拖拽功能

然后就像给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; //回复图片

									 }

									}