歡迎您光臨本站 註冊首頁

Unity UGUI實現簡單拖拽圖片功能

←手機掃碼閱讀     kyec555 @ 2020-06-22 , reply:0

這一篇博客我們來使用 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();     }     //當鼠標按下時調用 接口對應 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; //回覆圖片   }  }

 

現在就實現了簡單的拖放功能。

                                                       

   


[kyec555 ] Unity UGUI實現簡單拖拽圖片功能已經有123次圍觀

http://coctec.com/docs/program/show-post-239421.html