Godot 3.5.x中如何为任意图片添加圆角？

方法一：适配非方形图片的Shader方案 #

修改原有的方形专用Shader，让它支持任意宽高比的图片。核心是根据图片实际宽高比调整圆角计算逻辑，避免非方形时出现变形。

以下是适配后的Shader代码（兼容Godot 3.x/4.x）：

shader_type canvas_item;

uniform float corner_radius : hint_range(0, 100) = 10.0;

void fragment() {
    vec2 uv = UV;
    // 获取纹理宽高比，修正坐标适配非方形
    vec2 aspect = vec2(1.0, TEXTURE_PIXEL_SIZE.x / TEXTURE_PIXEL_SIZE.y);
    vec2 pos = uv * 2.0 - 1.0;
    pos.x *= aspect.x;
    
    // 计算圆角区域的透明度
    float dist = length(max(abs(pos) - (aspect - corner_radius / TEXTURE_PIXEL_SIZE.x), 0.0));
    float alpha = smoothstep(corner_radius / TEXTURE_PIXEL_SIZE.x, corner_radius / TEXTURE_PIXEL_SIZE.x + 1.0, dist);
    
    vec4 color = texture(TEXTURE, uv);
    color.a *= 1.0 - alpha;
    COLOR = color;
}

使用步骤：

• 创建ShaderMaterial，将上述代码粘贴到Shader编辑器中
• 将该材质赋值给Sprite、TextureRect等图片显示节点
• 在材质面板调整corner_radius参数，得到合适的圆角效果

方法二：使用ClipControl节点（Godot 4.x+） #

Godot 4.x新增的ClipControl可实现灵活的圆角裁剪：

• 将TextureRect作为ClipControl的子节点
• 给ClipControl的clip_shape属性选择RectangleShape2D
• 调整RectangleShape2D的corner_radius参数，即可对内部任意尺寸的图片进行圆角裁剪

方法三：遮罩法实现 #

如果不想用Shader，可通过遮罩节点实现：

• 创建与图片同尺寸的ColorRect，添加StyleBoxFlat并设置圆角
• 将该ColorRect设为图片节点的mask属性值
• 确保ColorRect颜色为白色，且与图片节点位置完全重合

内容的提问来源于stack exchange，提问作者user84118