你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

Unity中实现UI元素的响应区域精确判定

2021/12/25 19:28:04

一:前言


例如这张UI图片,正常情况下它的响应区域是一个矩形,如果当前有个需求是只有点击到UI元素上才视为点击,其他空白地方不视作点击,显然正常的做法不能满足需求
UGUI为我们提供了一种实现响应区域精确判断的方法,可以代码动态将alphaHitTestMinimumThreshold参数设置为0.1,这样就实现了只有在透明度大于0.1的像素点才视为响应,但它要求图片的Read/Write Enabled必须开启,这就导致了图片占用了两份内存,所以不建议使用
还有一种方法可以看这篇文章:Unity中实现自己的圆形Image组件_L的博客-CSDN博客
使用Ray-Crossing算法去判断响应区域,但前提是UI元素必须是代码动态绘制出来的
对于上面这种美术直接提供的PNG素材的响应区域精确判断,我们可以使用Polygon Collider2D组件,将大致轮廓勾出来,然后使用OverlapPoint方法计算是否在多边形碰撞器区域内


二:代码实现

using UnityEngine;
using UnityEngine.UI;

/// <summary>
/// 多边形Image组件
/// </summary>
[AddComponentMenu("LFramework/UI/PolygonImage", 12)]
[RequireComponent(typeof(PolygonCollider2D))]
public class PolygonImage : Image
{
    /// <summary>
    /// 2D多边形碰撞器
    /// </summary>
    PolygonCollider2D m_polygonCollider2D;

    protected override void Awake()
    {
        m_polygonCollider2D = GetComponent<PolygonCollider2D>();
    }

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        base.OnPopulateMesh(vh);
    }

    public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
    {
        Vector3 worldPos;
        RectTransformUtility.ScreenPointToWorldPointInRectangle(rectTransform, screenPoint, eventCamera, out worldPos);
        return m_polygonCollider2D.OverlapPoint(worldPos);
    }
}