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

Posted 2022-01-20 Hello Bug.

一：前言

例如这张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);