UnityUGUI矩形圆角Shader(支持长方形)

挺常见的需求，但找到的 Shader 一般只考虑了 1：1 矩形，这些 Shader 用在头像等正方形图像处没问题，但用做长方形图像时会出现圆角变形。

为什么要用 Shader

如果使用 Mask，会有额外的 DrawCall。

Shader 改造

搜到的 Shader 都大同小异，随意找一个来修改。只讨论修改部分，其他内容略过不表。

将图像的宽高比作为一个 Shader 参数引入：

 _RatioNum("height / width",Float) = 1

逻辑上图片 UV 坐标均为 0-1，根据上述宽高比，强行映射当前点坐标为等比例坐标：

float _RatioNum;

 fixed4 frag(v2f IN) : SV_Target
{
    half4 color = xxxxxxxxxxxx;
    //前略
    float width = 1;
    float height = _RatioNum; //即 width * rationum,因 uv width 为 1，省略此步骤。

    float x = IN.texcoord.x;
    float y = IN.texcoord.y * height;

    //判断裁切，后略
}

接下来的内容和原来的 Shader 一样，判断四个角，如果属于裁切范围，则将颜色的 alpha 设为 0（透明），代码略。

效果图

假设有一处 16：9 的运营图片位，将材质 Shader 换为我们修改过的 Shader，数值修改为如下：

将图片丢上去，效果如下：

可以见到，当引入宽高比之后，可以使得圆角 Shader 在长方形图像上显示正常。至于 1：1 方形效果，见本文章头图白色图形即可。