鼠标移入屏蔽穿透UI

本文介绍了一个Unity中用于检测用户输入是否覆盖UI元素的实用脚本。该脚本提供了三种方法来判断触摸或鼠标指针是否位于UI对象之上,包括通过EventSystem、屏幕坐标和特定画布组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

public class ShieldUIOver
{

    public static ShieldUIOver Instance = new ShieldUIOver();

    public ShieldUIOver()
    { }

   /// <summary>
   /// 传入手指ID
   /// </summary>
   /// <param name="fingerID"></param>
   /// <returns></returns>
    public bool IsPointerOverUIObject(int fingerID)
    {
        return EventSystem.current.IsPointerOverGameObject(fingerID);
    }


    /// <summary>
    ///相机有Physics Raycaster组件 通过EventSystem  可以检测到UI,3D物体
    ///没有Physics Raycaster组件 通过EventSystem 只可以检测到UI
    /// 如果Physics Raycaster组件 可以考虑选择是否要过滤3D物体
    /// </summary>
    /// <param name="screenPosition"></param>
    /// <returns></returns>
    public bool IsPointerOverUIObject(Vector2 screenPosition)
    {
        //实例化点击事件
        PointerEventData eventDataCurrentPosition = new PointerEventData(EventSystem.current);
        //将点击位置的屏幕坐标赋值给点击事件
        eventDataCurrentPosition.position = new Vector2(screenPosition.x, screenPosition.y);

        List<RaycastResult> results = new List<RaycastResult>();


        //向点击处发射射线
        EventSystem.current.RaycastAll(eventDataCurrentPosition, results);

        //TODO: 下面是检测到UI后屏蔽向下传递的事件,只检测UI
        //for (int i=results.Count-1;i>=0; i-- )
        //{
        //    Debug.LogError(results[i].gameObject.name);
        //     if (results[i].gameObject.layer==LayerMask.NameToLayer("Default"))
        //     {
        //        results.RemoveAt(i);
        //     }
        //}
        //Debug.Log(results.Count);
        return results.Count > 0;
    }

    /// <summary>
    /// 通过画布上的 GraphicRaycaster 组件发射射线
    /// 只会检测到UI,不会检测到3D物体
    /// </summary>
    /// <param name="canvas"></param>
    /// <param name="screenPosition"></param>
    /// <returns></returns>
    public bool IsPointerOverUIObject(Canvas canvas, Vector2 screenPosition)
    {
        //实例化点击事件
        PointerEventData eventDataCurrentPosition = new PointerEventData(EventSystem.current);
        //将点击位置的屏幕坐标赋值给点击事件
        eventDataCurrentPosition.position = screenPosition;
        //获取画布上的 GraphicRaycaster 组件
        GraphicRaycaster uiRaycaster = canvas.gameObject.GetComponent<GraphicRaycaster>();

        List<RaycastResult> results = new List<RaycastResult>();
        // GraphicRaycaster 发射射线
        uiRaycaster.Raycast(eventDataCurrentPosition, results);

        return results.Count > 0;
    }
}




测试脚本
public class TestEvent : MonoBehaviour {

// Use this for initialization
void Start () {

}

// Update is called once per frame
void Update () {
    //EventSystem 传递坐标
    if (ShieldUIOver.Instance.IsPointerOverUIObject(Input.mousePosition))
    {
        Debug.Log("方法二: 点击在UI 上");
    }

    //画布组件,传递坐标
    if (ShieldUIOver.Instance.IsPointerOverUIObject(GetComponent<Canvas>(), Input.mousePosition))
    {
        Debug.Log("方法三: 点击在UI 上");
    }
}
在React中,你可以通过结合CSS和JavaScript来实现图片在鼠标悬停时放大效果。这通常涉及到以下几个步骤: 1. 创建组件:首先,创建一个包含图片的React元素,例如`<img>`标签。 ```jsx import React from 'react'; const ImageWithHoverZoom = ({ src }) => { return ( <div className="image-container"> <img src={src} alt="Image" className="zoomable-image" /> </div> ); }; export default ImageWithHoverZoom; ``` 2. CSS样式:编写CSS来定义默认状态下的图片样式以及鼠标悬停时的放大样式。可以使用伪类`:hover`来改变图像大小。 ```css .image-container { position: relative; /* 确保鼠标事件可以穿透 */ } .zoomable-image { width: 100%; /* 图片宽度自适应 */ height: auto; /* 保持宽高比 */ transition: transform 0.3s ease-in-out; /* 添加平滑过渡效果 */ } .zoomable-image:hover { transform: scale(1.1); /* 缩放比例,可以根据需求调整 */ } ``` 3. 鼠标移入/移出事件:如果你想要取消缩放当鼠标离开图片,可以在组件中添加`onMouseEnter`和`onMouseLeave`事件处理函数。 ```jsx import React, { useRef, useEffect } from 'react'; // ... const ImageWithHoverZoom = ({ src }) => { const imgRef = useRef(null); useEffect(() => { // 当鼠标进入图片时放大 imgRef.current.addEventListener('mouseover', () => { imgRef.current.style.transform = 'scale(1.1)'; }); // 当鼠标离开图片时还原 imgRef.current.addEventListener('mouseout', () => { imgRef.current.style.transform = ''; }); return () => { // 清除事件监听,防止内存泄漏 imgRef.current.removeEventListener('mouseover', handleMouseEnter); imgRef.current.removeEventListener('mouseout', handleMouseLeave); }; }, []); return ( <div className="image-container"> <img ref={imgRef} src={src} alt="Image" className="zoomable-image" /> </div> ); }; export default ImageWithHoverZoom; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tianyongheng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值