UGUI實(shí)現(xiàn)圖片拖拽功能
這一篇博客我們來(lái)使用UGUI實(shí)現(xiàn)圖片的拖拽功能。
說(shuō)到拖拽,那必然離不開(kāi)坐標(biāo),UGUI 的坐標(biāo)有點(diǎn)不一樣,它有兩種坐標(biāo),一種是屏幕坐標(biāo),還有一種就是 UI 在Canvas內(nèi)的坐標(biāo)(暫時(shí)叫做ugui坐標(biāo)。),這兩個(gè)坐標(biāo)是不一樣的,所以拖拽是就需要轉(zhuǎn)換。因?yàn)槭髽?biāo)的移動(dòng)是屏幕坐標(biāo),而 UI 的移動(dòng)是ugui坐標(biāo)。轉(zhuǎn)換的方法:
RectTransformUtility.ScreenPointToLocalPointInRectangle ( … );這個(gè)方法可以把屏幕坐標(biāo)轉(zhuǎn)換成 ugui 坐標(biāo)。至于屏幕坐標(biāo)和 UGUI 坐標(biāo)的區(qū)別、轉(zhuǎn)換之類的我就不講了,因?yàn)槲乙彩且活^霧水,怕我說(shuō)了你們直接關(guān)瀏覽器了。
這里我們只需要知道 UI 的坐標(biāo)和鼠標(biāo)的坐標(biāo)是不一樣的,他們之間的相互移動(dòng)需要轉(zhuǎn)換就行了。
既然需要轉(zhuǎn)換,就少不了使用方法。所以這里有一些官方的 UGUI監(jiān)聽(tīng)事件:

(我就不獻(xiàn)丑翻譯了,英語(yǔ)還是有點(diǎn)渣。)
要給控件添加以上的監(jiān)聽(tīng)事件,有三種方法:
1、編寫一個(gè)類,實(shí)現(xiàn)上面的接口(用哪個(gè),實(shí)現(xiàn)哪個(gè)),給空間添加此腳本。
2、添加EventTrigger這個(gè)組件

添加想要添加的監(jiān)聽(tīng)

然后就像給Buttong添加監(jiān)聽(tīng)一樣添加方法就行。
3、程序動(dòng)態(tài)添加
這里我使用第一種方法,后面兩種有機(jī)會(huì)的話就講一下。
現(xiàn)在我們就正式開(kāi)始實(shí)現(xiàn)功能。新建一個(gè) 2D項(xiàng)目。場(chǎng)景中添加一張圖片(不一定要圖片,其他控件也行),然后給圖片添加腳本,名為MyDrag,編輯:
using UnityEngine;
using UnityEngine.EventSystems;
using System.Collections;
using System;
//給空間添加監(jiān)聽(tīng)事件要實(shí)現(xiàn)的一些接口
public class MyDrag : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler,
IEndDragHandler, IPointerEnterHandler, IPointerExitHandler {
public RectTransform canvas; //得到canvas的ugui坐標(biāo)
private RectTransform imgRect; //得到圖片的ugui坐標(biāo)
Vector2 offset = new Vector3(); //用來(lái)得到鼠標(biāo)和圖片的差值
Vector3 imgReduceScale = new Vector3(0.8f, 0.8f, 1); //設(shè)置圖片縮放
Vector3 imgNormalScale = new Vector3(1, 1, 1); //正常大小
// Use this for initialization
void Start () {
imgRect = GetComponent<RectTransform>();
}
//當(dāng)鼠標(biāo)按下時(shí)調(diào)用 接口對(duì)應(yīng) IPointerDownHandler
public void OnPointerDown(PointerEventData eventData)
{
Vector2 mouseDown = eventData.position; //記錄鼠標(biāo)按下時(shí)的屏幕坐標(biāo)
Vector2 mouseUguiPos = new Vector2(); //定義一個(gè)接收返回的ugui坐標(biāo)
//RectTransformUtility.ScreenPointToLocalPointInRectangle():把屏幕坐標(biāo)轉(zhuǎn)化成ugui坐標(biāo)
//canvas:坐標(biāo)要轉(zhuǎn)換到哪一個(gè)物體上,這里img父類是Canvas,我們就用Canvas
//eventData.enterEventCamera:這個(gè)事件是由哪個(gè)攝像機(jī)執(zhí)行的
//out mouseUguiPos:返回轉(zhuǎn)換后的ugui坐標(biāo)
//isRect:方法返回一個(gè)bool值,判斷鼠標(biāo)按下的點(diǎn)是否在要轉(zhuǎn)換的物體上
bool isRect = RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas, mouseDown, eventData.enterEventCamera, out mouseUguiPos);
if (isRect) //如果在
{
//計(jì)算圖片中心和鼠標(biāo)點(diǎn)的差值
offset = imgRect.anchoredPosition - mouseUguiPos;
}
}
//當(dāng)鼠標(biāo)拖動(dòng)時(shí)調(diào)用 對(duì)應(yīng)接口 IDragHandler
public void OnDrag(PointerEventData eventData)
{
Vector2 mouseDrag = eventData.position; //當(dāng)鼠標(biāo)拖動(dòng)時(shí)的屏幕坐標(biāo)
Vector2 uguiPos = new Vector2(); //用來(lái)接收轉(zhuǎn)換后的拖動(dòng)坐標(biāo)
//和上面類似
bool isRect = RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas, mouseDrag, eventData.enterEventCamera, out uguiPos);
if (isRect)
{
//設(shè)置圖片的ugui坐標(biāo)與鼠標(biāo)的ugui坐標(biāo)保持不變
imgRect.anchoredPosition = offset + uguiPos;
}
}
//當(dāng)鼠標(biāo)抬起時(shí)調(diào)用 對(duì)應(yīng)接口 IPointerUpHandler
public void OnPointerUp(PointerEventData eventData)
{
offset = Vector2.zero;
}
//當(dāng)鼠標(biāo)結(jié)束拖動(dòng)時(shí)調(diào)用 對(duì)應(yīng)接口 IEndDragHandler
public void OnEndDrag(PointerEventData eventData)
{
offset = Vector2.zero;
}
//當(dāng)鼠標(biāo)進(jìn)入圖片時(shí)調(diào)用 對(duì)應(yīng)接口 IPointerEnterHandler
public void OnPointerEnter(PointerEventData eventData)
{
imgRect.localScale = imgReduceScale; //縮小圖片
}
//當(dāng)鼠標(biāo)退出圖片時(shí)調(diào)用 對(duì)應(yīng)接口 IPointerExitHandler
public void OnPointerExit(PointerEventData eventData)
{
imgRect.localScale = imgNormalScale; //回復(fù)圖片
}
}
現(xiàn)在就實(shí)現(xiàn)了簡(jiǎn)單的拖放功能。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
C#程序終極調(diào)試實(shí)現(xiàn)windbg的時(shí)間旅行
這篇文章主要介紹了C#程序終極調(diào)試實(shí)現(xiàn)windbg的時(shí)間旅行示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
C# out關(guān)鍵詞的應(yīng)用實(shí)例
下面小編就為大家分享一篇C# out關(guān)鍵詞的應(yīng)用實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Unity游戲開(kāi)發(fā)中的中介者模式的應(yīng)用與實(shí)現(xiàn)
中介者模式是Unity游戲開(kāi)發(fā)中常用的設(shè)計(jì)模式之一,用于減少對(duì)象之間的直接耦合,通過(guò)引入中介者來(lái)協(xié)調(diào)對(duì)象之間的交互。通過(guò)中介者模式,游戲?qū)ο罂梢愿屿`活地進(jìn)行交互和協(xié)同工作,降低系統(tǒng)復(fù)雜度,使代碼更加易于維護(hù)和擴(kuò)展2023-05-05
WPF實(shí)現(xiàn)繪制扇形統(tǒng)計(jì)圖的示例代碼
這篇文章主要介紹了如何利用WPF繪制扇形統(tǒng)計(jì)圖,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)或工作有一定幫助,感興趣的小伙伴可以了解一下2022-09-09
C#實(shí)現(xiàn)人臉識(shí)別超簡(jiǎn)單方法舉例
這篇文章主要給大家介紹了關(guān)于C#實(shí)現(xiàn)人臉識(shí)別的相關(guān)資料,文中講解了在C#中使用EmguCV庫(kù)進(jìn)行人臉識(shí)別的簡(jiǎn)單示例,包括安裝EmguCV庫(kù)、準(zhǔn)備訓(xùn)練數(shù)據(jù)、編寫代碼和運(yùn)行程序,需要的朋友可以參考下2024-11-11
細(xì)說(shuō)C#中的枚舉:轉(zhuǎn)換、標(biāo)志和屬性
枚舉是 C# 中最有意思的一部分,大部分開(kāi)發(fā)人員只了解其中的一小部分,甚至網(wǎng)上絕大多數(shù)的教程也只講解了枚舉的一部分。那么,我將通過(guò)這篇文章向大家具體講解一下枚舉的知識(shí),需要的朋友可以參考下2020-02-02

