OpenGL如何用纹理图集的瓦片绘制任意尺寸按钮？

你的9宫格按钮方案本身没问题，问题出在非倍数尺寸时的瓦片处理逻辑，不是方法错误，是细节没处理到位。

具体解决方法 #

• 固定边角，重复填充边框与中心
  四个边角直接用原32px瓦片，保持尺寸不变；上下边框取横向1px宽的可重复条带、左右边框取纵向1px高的可重复条带，平铺填满所需的非标准宽度/高度；中心区域取1px×1px的可重复区域平铺，完全避免拉伸整块瓦片。
• 纹理图集适配设置
  导出纹理图集时给每个瓦片加1px空白边距，防止纹理采样边缘泄露；渲染时将可重复区域的纹理包裹模式设为重复（比如OpenGL的GL_REPEAT、Unity的Wrap Mode设为Repeat），让小条带自动重复填满目标区域。
• 精确计算纹理坐标
  用浮点坐标计算采样范围，避免像素值截断导致的偏移。比如要填充36px宽的上边框，直接取边框瓦片中间1px条带的纹理坐标，重复平铺36次，而非拉伸32px的瓦片到36px。

伪代码示例 #

// 按钮尺寸：width=100, height=100
// 瓦片尺寸：tileSize=32

// 绘制四个边角
drawTile(topLeft, 0, 0, tileSize, tileSize)
drawTile(topRight, width-tileSize, 0, tileSize, tileSize)
drawTile(bottomLeft, 0, height-tileSize, tileSize, tileSize)
drawTile(bottomRight, width-tileSize, height-tileSize, tileSize, tileSize)

// 绘制上下边框（横向1px重复带）
drawRepeatingTile(topBorder, tileSize, 0, width-2*tileSize, tileSize, tileX=1, tileY=0, tileWidth=1, tileHeight=tileSize)
drawRepeatingTile(bottomBorder, tileSize, height-tileSize, width-2*tileSize, tileSize, tileX=1, tileY=tileSize-1, tileWidth=1, tileHeight=tileSize)

// 绘制左右边框（纵向1px重复带）
drawRepeatingTile(leftBorder, 0, tileSize, tileSize, height-2*tileSize, tileX=0, tileY=1, tileWidth=tileSize, tileHeight=1)
drawRepeatingTile(rightBorder, width-tileSize, tileSize, tileSize, height-2*tileSize, tileX=tileSize-1, tileY=1, tileWidth=tileSize, tileHeight=1)

// 绘制中心填充（1px×1px重复带）
drawRepeatingTile(center, tileSize, tileSize, width-2*tileSize, height-2*tileSize, tileX=1, tileY=1, tileWidth=1, tileHeight=1)

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