【Unity】鼠标在某区域悬停触发文本框,移开关闭文本框

发布于:2025-03-05 ⋅ 阅读:(15) ⋅ 点赞:(0)

如题,实现鼠标悬停显示文本框,移开文本框关闭,文本框跟随鼠标位置。

直接上代码:

using UnityEngine;
using UnityEngine.EventSystems;

public class TooltipTrigger : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{

    [SerializeField]
    private GameObject tooltipPanel;  // 文本框
    private bool isMouseOver = false;  // 添加标志位追踪鼠标状态
    
    public void OnPointerEnter(PointerEventData eventData)
    {
        isMouseOver = true;
        tooltipPanel.SetActive(true);
    }
    
    public void OnPointerExit(PointerEventData eventData)
    {
        isMouseOver = false;
        // 检查鼠标是否移动到文本框上
        if (!IsPointerOverTooltip())
        {
            tooltipPanel.SetActive(false);
        }
    }
    
    private void Update()
    {
        if (tooltipPanel.activeSelf)
        {
            Vector2 mousePosition = Input.mousePosition;
            RectTransform panelRect = tooltipPanel.GetComponent<RectTransform>();
        
            // 获取panel的尺寸并计算偏移量
            Vector2 panelSize = panelRect.rect.size;
            Vector2 offset = new Vector2(panelSize.x * 0.5f, panelSize.y * 0.5f);
            
            // 添加一些额外的微调
            Vector2 extraOffset = new Vector2(10f, 10f); // 可以根据需要调整这个值
            tooltipPanel.transform.position = mousePosition + offset + extraOffset;
            
            // 如果鼠标不在触发区域且不在文本框上,则隐藏文本框
            if (!isMouseOver && !IsPointerOverTooltip())
            {
                tooltipPanel.SetActive(false);
            }
        }
    }
    
    private bool IsPointerOverTooltip()
    {
        // 检查鼠标是否在文本框上
        PointerEventData eventData = new PointerEventData(EventSystem.current);
        eventData.position = Input.mousePosition;
        
        var results = new System.Collections.Generic.List<RaycastResult>();
        EventSystem.current.RaycastAll(eventData, results);
        
        foreach (var result in results)
        {
            if (result.gameObject == tooltipPanel || result.gameObject.transform.IsChildOf(tooltipPanel.transform))
            {
                return true;
            }
        }
        
        return false;
    }
}

 

使用方法:

1. 首先在场景中创建一个触发区域(可以是UI元素如Image或Button,也可以是3D物体)
2. 创建一个文本框面板(Panel),包含显示文本的UI Text或TMP_Text组件
3. 将上述脚本添加到触发区域的游戏物体上
4. 在Inspector中将文本框面板拖拽到tooltipPanel字段
5. 在tooltipText字段中设置想要显示的提示文本

注意事项:

  • 确保触发区域物体上有Collider(3D物体)或Collider2D(2D物体)组件,如果是UI元素则需要有Image或RawImage组件
  • 文本框面板初始状态应该设置为隐藏(SetActive(false))
  • 如果需要文本框跟随鼠标位置,可以添加更新文本框位置的代码

可以根据需要调整文本框的位置偏移,以确保它不会被鼠标遮挡。


网站公告

今日签到

点亮在社区的每一天
去签到