如何使用同一纹理渲染不同尺寸矩形且保证边角纹理不拉伸

你需要的效果可以直接用**9切片（九宫格缩放）**技术实现，这是该场景下的通用标准方案，具体实现逻辑如下：

• 第一步先划分纹理区块：把你的原始纹理拆成9个部分，分别是4个边角（左上、右上、左下、右下）、4个边缘（上、下、左、右）、1个中间渐变区域，先确定好4个边角对应的像素尺寸，这个尺寸后续渲染全程固定不变。
• 第二步渲染不同尺寸矩形时，不同区块用不同的缩放规则：
  • 4个边角：完全不做任何缩放，按原始像素尺寸直接贴在目标矩形的四个对应角落即可
  • 4个边缘：只做单方向拉伸，上下边缘只横向拉伸匹配当前矩形的宽度，左右边缘只纵向拉伸匹配当前矩形的高度
  • 中间区域：可以双向自由拉伸，刚好符合你不关心中间渐变拉伸的要求
• 常见开发环境下可以直接调用现成接口，不需要自己手动实现所有逻辑：
  • Unity：导入纹理后把Sprite Mode设置为9 Sliced，打开Sprite Editor拖拽边框线划定好边角区域的尺寸，后续直接用这个Sprite就能自动适配不同尺寸
  • Unreal Engine：在Slate Brush的设置里开启9切片属性，或者在材质编辑器里调用9 Slice节点就能实现
  • 自定义渲染管线/WebGL原生开发：可以直接在片元着色器里做UV映射处理，核心逻辑示例如下：

// 提前设置好边角占整张纹理的UV比例，根据你实际纹理的边角尺寸调整
float cornerUVRatio = 0.15;
vec2 targetUV = v_uv;

// 横向UV映射处理
if (targetUV.x < cornerUVRatio) {
  // 左侧区域，保持原UV不变
} else if (targetUV.x > 1.0 - cornerUVRatio) {
  // 右侧区域，保持原UV不变
  targetUV.x = 1.0 - (1.0 - targetUV.x) * (cornerUVRatio / (1.0 - cornerUVRatio));
} else {
  // 中间区域，拉伸UV适配
  targetUV.x = cornerUVRatio + (targetUV.x - cornerUVRatio) * ((1.0 - 2.0 * cornerUVRatio) / (1.0 - 2.0 * cornerUVRatio));
}
// 纵向UV映射逻辑和横向完全一致
vec4 finalColor = texture2D(u_originalTexture, targetUV);

这个方案可以做到所有不同宽高比的矩形都复用同一张纹理，且边角不会出现任何拉伸变形。

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