unity 学习笔记 UI

需求-卡牌游戏

实现鼠标移动到卡片时放大，移出时恢复原状，可拖动，可判定拖动至不同ui区域，在手牌区域放置后会自动回到原来的位置

using System.Collections;
using System.Collections.Generic;
using Unity.VisualScripting;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using DG.Tweening;
public class CardItem : MonoBehaviour, IEndDragHandler, IDragHandler,IPointerEnterHandler,IPointerExitHandler,IPointerClickHandler
{
    public RectTransform[] regions;// 假设你已经有了四个区域边界的RectTransform引用  
    public Transform _orignTrans;//原手牌区域的panel
    public Transform _hightlightTrans;//高亮的手牌panel
    RectTransform _mainCanvas;//canvas的

    public int _index;//卡片在手牌区域的索引(根据这个索引在不使用卡片时恢复到原来的手牌区域的位置中)
    private void Awake()
    {
        _mainCanvas = GameObject.Find("Canvas").GetComponent<RectTransform>();
    }
    //拖拽的逻辑
    public void OnDrag(PointerEventData eventData)
    {
        Vector3 globalMousePos;
        if (RectTransformUtility.ScreenPointToWorldPointInRectangle
            (_mainCanvas, eventData.position, eventData.pressEventCamera, out globalMousePos))
        {

            this.transform.position = globalMousePos;
            this.transform.rotation = _mainCanvas.rotation;
            //CheckPos();

        }
    }
	///结束拖拽的逻辑,结束时判定ui所在的ui区域是否为所需要的位置,是的话则开始执行下一个功能逻辑,不是则返回到原来的位置
    public void OnEndDrag(PointerEventData eventData)
    {
        // 转换当前UI元素的RectTransform到Canvas的坐标系中  
        Vector2 localPoint;
        for (int i = 0; i < regions.Length; i++)
        {
            //将选中的点转换为Image区域内的本地点
            RectTransformUtility.ScreenPointToLocalPointInRectangle(regions[i], eventData.position, null, out localPoint);

            Vector2 pivot = regions[i].pivot;
            Vector2 normalizedLocal =
                new Vector2(pivot.x + localPoint.x / regions[i].sizeDelta.x, pivot.y + localPoint.y / regions[i].sizeDelta.y);
            if ((normalizedLocal.x >= 0 && normalizedLocal.x <= 1) && ((normalizedLocal.y >= 0 && normalizedLocal.y <= 1)))
            {
                Debug.Log($"拖拽到区域{i+1}");
                // 假设rectTransform是包含需要刷新布局的UI元素的RectTransform
                if (i == 3)
                {
                    this.Back2OriginPanel();
                    LayoutRebuilder.ForceRebuildLayoutImmediate(regions[3]);
                }

                return;
            }
        }
        LayoutRebuilder.ForceRebuildLayoutImmediate(regions[3]);

    }
	///鼠标移开卡片时的逻辑
    public void OnPointerExit(PointerEventData eventData)
    {
        this.Back2OriginPanel();
    }
	///鼠标移入卡片时的逻辑
    public void OnPointerEnter(PointerEventData eventData)
    {
        this.ToHightlightPanel();
    }
	///鼠标点击卡片时的逻辑
    public void OnPointerClick(PointerEventData eventData)
    {
        Debug.Log("123");
    }
	///回到卡片原来的位置
    private void Back2OriginPanel()
    {
        this.transform.DOScale(1f, 0.3f);
        this.transform.SetParent(_orignTrans);
        this.transform.SetSiblingIndex(_index);
        this.GetComponentInParent<HorizontalLayoutGroup>().enabled = true;
    }
	//卡片高亮
    private void ToHightlightPanel()
    {
        this.transform.DOScale(1.2f, 0.3f);
        this.GetComponentInParent<HorizontalLayoutGroup>().enabled = false;
        this.transform.SetParent(_hightlightTrans);
    }
}