Unity學習筆記之UGUI基礎——給UI元素增加事件處理功能

有些UI元素(主要是非可交互控件)沒有事件處理能力,可以爲其添加,有三種方法:

        1. 實現相應得事件接口:參考UnityEventSystems命名空間

        2. 添加EventTrigger組件,並指定事件處理器

        3. 程序動態添加

示例1:拖拽界面元素

         首先新建一個Unity工程,創建一個簡單的UI窗體界面,如下圖:


        爲Header添加一個腳本DragPlane,用來控制拖動Window,代碼如下:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class DragPanel : MonoBehaviour, IDragHandler, IPointerDownHandler
{
    /// <summary>
    /// 記錄window在Background中的位置
    /// </summary>
    private Vector2 windowInBackgroundPos;

    /// <summary>
    /// 記錄鼠標按下時的座標位置
    /// </summary>
    private Vector2 downPos;

    /// <summary>
    /// 記錄鼠標拖動後的座標位置(相對於Background的原點位置)
    /// </summary>
    private Vector2 curPos;

    /// <summary>
    /// 保存拖拽區的父節點
    /// </summary>
    private RectTransform window;

    // Unity會在用戶點擊到標題條時給我們發送此消息(也即:Unity會“回調”此函數)
    // 並且將鼠標按下的位置通過eventData發送給我們
    public void OnPointerDown(PointerEventData eventData)
    {
        // 獲取到當前節點的父節點
        window = this.transform.parent as RectTransform;

        // 記錄下當前標題條在父節點Window中的本地座標(鼠標點擊的位置)
        windowInBackgroundPos = window.localPosition;

        // 調用ScreenPointToLocalPointInRectangle()靜態函數,獲取鼠標點下時在Background座標系中的位置
        // 參數爲1.目標座標系  2.鼠標位置  3.鼠標按下時對應的攝像機  4.傳出鼠標按下時的位置
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            window.parent as RectTransform
            , eventData.position
            , eventData.pressEventCamera
            , out downPos);
    }

    // 將鼠標拖動後的位置通過eventData發送給我們
    public void OnDrag(PointerEventData eventData)
    {
        // 傳出一個拖動後的鼠標位置
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            window.parent as RectTransform
            , eventData.position
            , eventData.pressEventCamera
            , out curPos
            );

        Debug.Log(curPos);

        // 拖動後的偏移值
        Vector2 offset = curPos - downPos;

        // 拖動後的窗口位置等於舊位置加上偏移值
        window.localPosition = windowInBackgroundPos + offset;

    }
}

這樣就實現了點住標題可拖動窗口的效果。

示例2:拉伸界面元素

        爲Resize Zone添加一個ResizePanel腳本,代碼如下:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class ResizePanel : MonoBehaviour, IDragHandler, IPointerDownHandler
{
    /// <summary>
    /// 窗口原始大小
    /// </summary>
    private Vector2 origSize;

    /// <summary>
    /// 記錄鼠標按下時的座標位置
    /// </summary>
    private Vector2 downPos;

    /// <summary>
    /// 記錄鼠標拖動後的座標位置(相對於Background的原點位置)
    /// </summary>
    private Vector2 curPos;

    /// <summary>
    /// 保存拖拽區的父節點
    /// </summary>
    private RectTransform window;

    public void OnPointerDown(PointerEventData eventData)
    {
        window = this.transform.parent as RectTransform;

        // 保存窗口原始大小
        origSize = window.sizeDelta;

        // 傳出鼠標點下時的位置
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            window.parent as RectTransform
            , eventData.position
            , eventData.pressEventCamera
            , out downPos
            );
    }


    public void OnDrag(PointerEventData eventData)
    {
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            window.parent as RectTransform
            , eventData.position
            , eventData.pressEventCamera
            , out curPos
            );

        Vector2 offset = curPos - downPos;

        // 因爲UGUI座標系原點座標系在屏幕左下角
        // 而我們是以左上角爲原點,所以要進行一下Y軸的翻轉
        offset.y *= -1;
        window.sizeDelta = origSize + offset;
    }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章