Unity 显示Raycast Padding区域

简介

Raycast Padding 是一个在Unity2020.1左右添加的功能，它可以让你在不改变RectTransform的值的情况下，调整Image或Text等UI对象的射线检测区域。你可以设置四个参数来控制上下左右的边距。

这个功能很实用，在推出这个功能之前如果遇到点击区域过大或者过小的问题，只能通过新建Image并设置透明来做正确的点击区域。但是这个功能有个鸡肋的地方，就是无法通过视图Scene显示直观的知道区域变化（吐槽一下官方怎么没考虑到这个问题，很多开发者在论坛反馈）。下面通过写编辑器拓展实现显示Raycast Padding区域。

代码

该脚本需要放在Editor文件夹下。

using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

public class RaycastPaddingEditor
{
    //RaycastPadding可视化
    [DrawGizmo(GizmoType.Selected)]
    private static void DrawImageRaycastPaddingGizmos(Image image, GizmoType gizmoType)
    {
        if (image.raycastTarget)
        {
            var color = Color.red; //颜色
            Gizmos.color = color;

            var positions = new Vector3[4];
            var rect = GetRect(image.rectTransform);
            var pad = image.raycastPadding;

			//Image.raycastPadding 是Vector4的参数，其中x到w分别代表左、下、右和上的值。
			//根据矩阵信息设置旋转缩放
            positions[0] = (Vector3)(image.transform.localToWorldMatrix * (new Vector3(rect.x + pad.x, rect.y + pad.y) - image.transform.position)) + image.transform.position;
            positions[1] = (Vector3)(image.transform.localToWorldMatrix * (new Vector3(rect.x + rect.width - pad.z, rect.y + pad.y) - image.transform.position)) + image.transform.position;
            positions[2] = (Vector3)(image.transform.localToWorldMatrix * (new Vector3(rect.x + rect.width - pad.z, rect.y + rect.height - pad.w) - image.transform.position)) + image.transform.position; 
            positions[3] = (Vector3)(image.transform.localToWorldMatrix * (new Vector3(rect.x + pad.x, rect.y + rect.height - pad.w) - image.transform.position)) + image.transform.position; 

            Gizmos.DrawLine(positions[0], positions[1]);
            Gizmos.DrawLine(positions[1], positions[2]);
            Gizmos.DrawLine(positions[2], positions[3]);
            Gizmos.DrawLine(positions[3], positions[0]);
        }
    }

	//获取Image对象本身的Rect信息
    static Rect GetRect(RectTransform rectTransform)
    {
        Vector2 size = rectTransform.rect.size;

        return new Rect
        {
            center = (Vector2)rectTransform.position - new Vector2(
                rectTransform.pivot.x * size.x,
                rectTransform.pivot.y * size.y
            ),
            size = size,
        };
    }
}

功能完成，测试一下。

试试旋转。