UGUI学习笔记（八）UGUI不规则响应区域

港控/mmm° 2023-09-27 09:08 202阅读 0赞

## 一、Unity自带的点击策略 ##

在上一篇文章中我们了解到，UI的默认响应区域是UI元素所在的矩形框线内的区域。这也就意味着，当UI的图形为不规则形状时，点击图形的外部也可能会触发事件。  
![7f104961fb7e741835adb3c864dda743.gif][]

但其实Unity自带了一种不规则区域点击策略。要想使用它，我们首先要将精灵的「Read/Write」属性设置为开启状态  
![5f17123e09ec56b626301fdfde8a5c06.png][]

然后在代码中将「Image」组件中的「alphaHitTestMinimumThreshold」属性设置为0.1。这样图片的透明度低于0.1的地方就不会响应点击事件

void Start()
    {
        
    	GetComponent<Image>().alphaHitTestMinimumThreshold = 0.1f;
    }

效果如下：  
![1ddafea4f9f9f33e31dc497c95a0b08d.gif][]

但这种方式存在一个问题：如果将图片的「Read/Write」开启的话，图片所占用的内存会大幅度增加，且该图片将无法被并入图集。因此一般项目中不会使用这个功能。

## 二、自己实现的点击策略 ##

既然需要自己实现点击策略，那就又要用到`IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)`这个方法。只是这次我们无法使用已生成好的顶点坐标列表，不过可以用「Polygon Collider 2D」组件来替代。这个组件可以给物体添加自定义形状的碰撞体（对于这张图片来说也可以添加圆形碰撞体）。  
![d20d8e5d46e22962bf4c394e4a09a40c.png][]

然后调用组件中的`OverlapPoint`方法，就可以直接判断点击的目标点是否位于碰撞体内部

public class IrregularUIClick : Image
    {
        
        private PolygonCollider2D _polygon;
        public PolygonCollider2D Polygon
        {
        
            get
            {
        
                if (_polygon == null)
                    _polygon = GetComponent<PolygonCollider2D>();
                return _polygon;
            }
        }
        public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
        {
        
            RectTransformUtility.ScreenPointToWorldPointInRectangle(rectTransform, screenPoint, eventCamera,out Vector3 worldPoint);
            return Polygon.OverlapPoint(worldPoint);
        }
    }

最终效果如下：  
![214e6d7922c9c010f7a1e0add364ae1d.gif][]

[7f104961fb7e741835adb3c864dda743.gif]: https://img-blog.csdnimg.cn/img_convert/7f104961fb7e741835adb3c864dda743.gif
[5f17123e09ec56b626301fdfde8a5c06.png]: https://img-blog.csdnimg.cn/img_convert/5f17123e09ec56b626301fdfde8a5c06.png
[1ddafea4f9f9f33e31dc497c95a0b08d.gif]: https://img-blog.csdnimg.cn/img_convert/1ddafea4f9f9f33e31dc497c95a0b08d.gif
[d20d8e5d46e22962bf4c394e4a09a40c.png]: https://img-blog.csdnimg.cn/img_convert/d20d8e5d46e22962bf4c394e4a09a40c.png
[214e6d7922c9c010f7a1e0add364ae1d.gif]: https://img-blog.csdnimg.cn/img_convert/214e6d7922c9c010f7a1e0add364ae1d.gif