Unity UGUI 實現簡單拖拽功能

標籤：rect   技術分享   code   vector   大小   轉化   監聽   ipo   and   

說到拖拽，那必然離不開座標，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, 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;   //回複圖片    }}

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

Unity UGUI 實現簡單拖拽功能