這一篇部落格我們來使用 UGUI 實現圖片的拖拽功能。

說到拖拽，那必然離不開座標，UGUI 的座標有點不一樣，它有兩種座標，一種是螢幕座標，還有一種就是 UI 在Canvas內的座標（暫時叫做ugui座標。），這兩個座標是不一樣的，所以拖拽是就需要轉換。因為滑鼠的移動是螢幕座標，而 UI 的移動是ugui座標。轉換的方法：

RectTransformUtility.ScreenPointToLocalPointInRectangle ( … );這個方法可以把螢幕座標轉換成 ugui 座標。至於螢幕座標和 UGUI 座標的區別、轉換之類的我就不講了，因為我也是一頭霧水，怕我說了你們直接關瀏覽器了。

既然需要轉換，就少不了使用方法。所以這裡有一些官方的 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,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; //回覆圖片
 }
}

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。