美文网首页
UGUI做类似Windows的框选功能

UGUI做类似Windows的框选功能

作者: runinnn | 来源:发表于2020-08-18 23:20 被阅读0次

UGUI做一个类似Windows的框选功能:

效果:

主要用到的知识点,就是2D世界的碰撞检测(BoxCollider2D和Rigidbody2D两位大兄弟很必要)

当然也包括设置Ui物体的大小和位置。并且运用UGUI的鼠标事件(EventTrigger)

功能的主要部分:

1、框选的Image需要加上BoxCollider2D和Rigidbody2D两个组件。被选择的物体要有BoxCollider2D组件

并设置好对应的BoxCollider2D的大小,使用(OnTriggerEnter2D,OnTriggerStay2D,OnTriggerExit2D)碰撞检测方法。

详细的比如:选中物体的效果,选中后的事件

2、拖拽改变框选图片的大小和位置(在这里我将框选的图片的中心点设置为Vector2(0.5f, 0.5f),这样就可以避免要频繁设置其碰撞的偏移值(偷懒的做法,哈哈))

改变大小和计算位置的方法:(StartPosition为鼠标按下时的位置坐标,EndPosition为鼠标拖拽中的位置坐标)

            float x = Mathf.Abs(StartPosition.x - EndPosition.x);

            float y = Mathf.Abs(StartPosition.y - EndPosition.y);

            Vector2 size = new Vector2(x, y);

            Vector3 resultPosition = Vector3.zero;

            resultPosition.x = (StartPosition.x + EndPosition.x) / 2;

            resultPosition.y = (StartPosition.y + EndPosition.y) / 2;

主要是在鼠标拖拽时改变框选的图片的大小和其碰撞的大小,和图片的位置。(拓展了一些别的方法,例如修改框选图片的sprite和颜色color)

详细代码

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.EventSystems;

using UnityEngine.UI;

/// <summary>

/// 将脚本挂在需要框选的界面上

/// </summary>

public class DragSelectView : MonoBehaviour

{

    public SelectImageView SelectImageView;

    Vector3 StartPosition = Vector3.zero;

    Vector3 EndPosition = Vector3.zero;

    // Start is called before the first frame update

    void Start()

    {

        InitSelectImage();

        UIEventListener uIEventListener = UIEventListener.GetEventListener(gameObject);

        uIEventListener.PointerDownEvent += OnPointerDownEvent;

        uIEventListener.PointerUpEvent += OnPointerUpEvent;

        uIEventListener.OnDragEvent += OnDragEvent;

    }

    /// <summary>

    /// 鼠标按下

    /// </summary>

    private void OnPointerDownEvent(PointerEventData eventData)

    {

        StartPosition = eventData.position;

        SelectImageView.PointerDownEvent();

    }

    /// <summary>

    /// 鼠标抬起

    /// </summary>

    private void OnPointerUpEvent(PointerEventData eventData)

    {

        SelectImageView.ResetPositionAndSize();

    }

    private void OnDragEvent(PointerEventData eventData)

    {

        if (eventData.button == PointerEventData.InputButton.Left)

        {

            EndPosition = eventData.position;

            float x = Mathf.Abs(StartPosition.x - EndPosition.x);

            float y = Mathf.Abs(StartPosition.y - EndPosition.y);

            Vector2 size = new Vector2(x, y);//计算拖拽的大小

            Vector3 resultPosition = Vector3.zero;

            resultPosition.x = (StartPosition.x + EndPosition.x) / 2;

            resultPosition.y = (StartPosition.y + EndPosition.y) / 2;//计算此时图片的位置,图片中心点为(0.5,05)

            SelectImageView.OnDrag(size, resultPosition);

        }

    }

    /// <summary>

    /// 生成框选的图片

    /// </summary>

    private void InitSelectImage()

    {

        if (SelectImageView == null)

        {

            var selectImageItem = new GameObject("SelectImage");

            selectImageItem.SetActive(false);

            SelectImageView = selectImageItem.AddComponent<SelectImageView>();

            selectImageItem.AddComponent<RectTransform>();

            selectImageItem.AddComponent<Image>();

            selectImageItem.transform.SetParent(transform);

        }

        if (SelectImageView)

        {

            SelectImageView.InitViewData();

        }

    }

}

using System;

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class SelectImageView : MonoBehaviour

{

    public Sprite SelectImageSprite;

    public Color SelectImageColor = Color.white;

    public RectTransform SelectImageRectTransform;

    private BoxCollider2D SelectImageCollider;

    private Image SelectImage;

    /// <summary>

    /// 所选择的物体

    /// </summary>

    public List<GameObject> SelectItems = new List<GameObject>();

    /// <summary>

    /// 删除事件,可以在按Delete触发事件

    /// </summary>

    public Action DelectEvent;

    GameObject SelectItemEffect;

    Image SelectItemEffectImage;

    private bool IsDraging = false;

    /// <summary>

    /// 设置颜色或者图片

    /// </summary>

    /// <param name="selectImageSprite"></param>

    /// <param name="color"></param>

    public void SetColorOrImage(Sprite selectImageSprite, Color color)

    {

        SelectImageSprite = selectImageSprite;

        SelectImageColor = color;

        SelectImage.sprite = SelectImageSprite;

        SelectImage.color = SelectImageColor;

        SelectItemEffectImage.sprite = SelectImageSprite;

        SelectItemEffectImage.color = SelectImageColor;

    }

    /// <summary>

    /// 初始化界面数据

    /// </summary>

    public void InitViewData()

    {

        SelectImageRectTransform = gameObject.GetComponent<RectTransform>();

        SelectImage = gameObject.GetComponent<Image>();

        SelectImage.color = new Color(0, 0, 0, 0.5f);

        SelectImage.raycastTarget = false;

        gameObject.SetActive(true);

        SelectImageRectTransform.pivot = new Vector2(0.5f, 0.5f);

        SelectImageRectTransform.localScale = Vector3.one;

        SelectImageRectTransform.localEulerAngles = Vector3.zero;

        SelectImage = SelectImageRectTransform.GetComponent<Image>();

        SetPositionAndSize(Vector2.zero, Vector3.zero);

        SelectImageRectTransform.gameObject.SetActive(true);

        //主要加2d的碰撞和Rigibody2D

        SelectImageCollider = SelectImageRectTransform.GetComponent<BoxCollider2D>();

        if (SelectImageCollider == null)

        {

            SelectImageCollider = SelectImageRectTransform.gameObject.AddComponent<BoxCollider2D>();

        }

        if (SelectImageCollider)

        {

            SelectImageCollider.isTrigger = true;

        }

        var rigiBody = SelectImageRectTransform.GetComponent<Rigidbody2D>();

        if (rigiBody == null)

        {

            rigiBody = SelectImageRectTransform.gameObject.AddComponent<Rigidbody2D>();

            rigiBody.gravityScale = 0;

        }

        //选中效果

        SelectItemEffect = Instantiate(gameObject,transform.parent);

        SelectItemEffect.SetActive(false);

        SelectItemEffectImage = SelectItemEffect.GetComponent<Image>();

        var collider = SelectItemEffect.GetComponent<BoxCollider2D>();

        if (collider)

        {

            Destroy(collider);

        }

        var rigiBodyEffect = SelectItemEffect.GetComponent<Rigidbody2D>();

        if (rigiBodyEffect == null)

        {

            Destroy(rigiBodyEffect);

        }

    }

    /// <summary>

    /// 选中效果

    /// </summary>

    private void CreateSelectItemEffect(Transform selectItem)

    {

        if (selectItem)

        {

            GameObject item = Instantiate(SelectItemEffect, selectItem);

            item.name = Select_Effect ;

            item.transform.localPosition = Vector3.zero;

            item.transform.localEulerAngles = Vector3.zero;

            item.transform.localScale = Vector3.one;

            var rect = item.GetComponent<RectTransform>();

            var selectItemRect = selectItem.GetComponent<RectTransform>();

            //rect.sizeDelta = selectItemRect.sizeDelta;//在这里要注意UGUI获取尺寸的属性

            rect.sizeDelta = selectItemRect.rect.size;//设置效果的大小

            item.SetActive(true);

        }

    }

    string Select_Effect = "Select^Effect";

    /// <summary>

    /// 选中效果

    /// </summary>

    private void RemoveSelectItemEffect(Transform selectItem)

    {

        if (selectItem)

        {

            var effect = selectItem.transform.Find(Select_Effect);

            if (effect)

            {

                Destroy(effect.gameObject);

            }

        }

    }

    public void ResetPositionAndSize()

    {

        SetPositionAndSize(Vector2.zero, Vector3.zero);

        IsDraging = false;

    }

    public void PointerDownEvent()

    {

        SetPositionAndSize(Vector2.zero, Vector3.zero);

        IsDraging = false;

        ClearSelectEffects();

    }

    public void OnDrag(Vector2 size, Vector3 position)

    {

        SetPositionAndSize(size, position);

        IsDraging = true;

    }

    /// <summary>

    /// 设置坐标和大小

    /// </summary>

    /// <param name="size"></param>

    /// <param name="position"></param>

    private void SetPositionAndSize(Vector2 size, Vector3 position)

    {

        if (SelectImageRectTransform)

        {

            SelectImageRectTransform.position = position;

            SelectImageRectTransform.sizeDelta = size;

            if (SelectImageCollider)

            {

                SelectImageCollider.size = size;

            }

            SelectImageRectTransform.localScale = Vector3.one;

        }

    }

    private void Update()

    {

        if (Input.GetKeyDown(KeyCode.Delete))

        {

            DelectEvent?.Invoke();

            ClearSelectItems();

        }

    }

    private void OnTriggerEnter2D(Collider2D collision)

    {

        if (collision)

        {

            AddSelectItems(collision.gameObject);

        }

    }

    private void OnTriggerStay2D(Collider2D collision)

    {

        if (collision)

        {

            AddSelectItems(collision.gameObject);

        }

    }

    private void OnTriggerExit2D(Collider2D collision)

    {

        if (collision)

        {

            RemoveSelectItems(collision.gameObject);

        }

    }

    /// <summary>

    /// 添加选中的物体到一个列表

    /// </summary>

    /// <param name="item"></param>

    private void AddSelectItems(GameObject item)

    {

        if (!SelectItems.Contains(item))

        {

            SelectItems.Add(item);

            CreateSelectItemEffect(item.transform);

        }

    }

    /// <summary>

    /// 移出选择的物体

    /// </summary>

    /// <param name="item"></param>

    private void RemoveSelectItems(GameObject item)

    {

        if (SelectItems.Contains(item))

        {

            SelectItems.Remove(item);

            RemoveSelectItemEffect(item.transform);

        }

    }

    private void ClearSelectItems()

    {

        for (int i = 0; i < SelectItems.Count; i++)

        {

            var item = SelectItems[i];

            if (item)

            {

                RemoveSelectItemEffect(item.transform);

                Destroy(item);

            }

        }

    }

    private void ClearSelectEffects()

    {

        for (int i = 0; i < SelectItems.Count; i++)

        {

            var item = SelectItems[i];

            if (item)

            {

                RemoveSelectItemEffect(item.transform);

            }

        }

        SelectItems.Clear();

    }

}

只需将DragSelectView脚本挂在需要框选的界面上即可。

相关文章

网友评论

      本文标题:UGUI做类似Windows的框选功能

      本文链接:https://www.haomeiwen.com/subject/yvycjktx.html