九宫格界面拉伸怎样保住四个角：七种目标尺寸的九宫格边框（实例09）

按钮和提示框放大时，整体缩放会让边框与圆角一起变粗。九宫格方法把四角、四边和中心分开，让固定边框与可伸缩内部遵循不同规则。

先固定规则和输入

源图按左、右、上、下固定边宽切成九块。目标尺寸不足以容纳两侧边框时，本例主动把尺寸抬到边框总和；四角大小保持，横边只横向拉伸，竖边只竖向拉伸，中心双向拉伸。

源尺寸[96, 111]，边框[左,右,上,下][17, 21, 6, 8] 源横边界[0, 17, 75, 96]，源纵边界[0, 6, 103, 111]

把结果按步骤记下来

请求[34, 11]，实际尺寸[38, 14]，横边界[0, 17, 17, 38]，纵边界[0, 6, 6, 14]；按先行后列的九块宽高[[17, 6], [0, 6], [21, 6], [17, 0], [0, 0], [21, 0], [17, 8], [0, 8], [21, 8]]，总面积532。

请求[38, 14]，实际尺寸[38, 14]，横边界[0, 17, 17, 38]，纵边界[0, 6, 6, 14]；按先行后列的九块宽高[[17, 6], [0, 6], [21, 6], [17, 0], [0, 0], [21, 0], [17, 8], [0, 8], [21, 8]]，总面积532。

请求[256, 94]，实际尺寸[256, 94]，横边界[0, 17, 235, 256]，纵边界[0, 6, 86, 94]；按先行后列的九块宽高[[17, 6], [218, 6], [21, 6], [17, 80], [218, 80], [21, 80], [17, 8], [218, 8], [21, 8]]，总面积24064。

请求[93, 56]，实际尺寸[93, 56]，横边界[0, 17, 72, 93]，纵边界[0, 6, 48, 56]；按先行后列的九块宽高[[17, 6], [55, 6], [21, 6], [17, 42], [55, 42], [21, 42], [17, 8], [55, 8], [21, 8]]，总面积5208。

请求[122, 197]，实际尺寸[122, 197]，横边界[0, 17, 101, 122]，纵边界[0, 6, 189, 197]；按先行后列的九块宽高[[17, 6], [84, 6], [21, 6], [17, 183], [84, 183], [21, 183], [17, 8], [84, 8], [21, 8]]，总面积24034。

请求[172, 177]，实际尺寸[172, 177]，横边界[0, 17, 151, 172]，纵边界[0, 6, 169, 177]；按先行后列的九块宽高[[17, 6], [134, 6], [21, 6], [17, 163], [134, 163], [21, 163], [17, 8], [134, 8], [21, 8]]，总面积30444。

请求[100, 178]，实际尺寸[100, 178]，横边界[0, 17, 79, 100]，纵边界[0, 6, 170, 178]；按先行后列的九块宽高[[17, 6], [62, 6], [21, 6], [17, 164], [62, 164], [21, 164], [17, 8], [62, 8], [21, 8]]，总面积17800。

前两组专门检查小于或恰好等于最小尺寸时的退化中心，其余组检查正常伸缩。目标范围中不应出现负宽度或负高度。

自己复核的办法

所有源分块应该刚好覆盖源图；所有目标分块应该刚好覆盖实际目标。中心宽或高为零时允许退化为空区域，不要除以零去计算缩放倍率。

建议先遮住结果，用本例原始输入独立完成一遍，再逐项对照。若出现差异，先找最早不一致的位置，检查索引从零还是从一开始、边界是否包含，以及比较或更新发生的先后。只比较最后一个数，往往无法分辨规则理解与计算步骤分别出了什么问题。

使用这个练习的边界

这种最小尺寸处理是本练习的明确选择，并非所有界面系统都如此。实际实现也可能压缩边框或裁切内容。比较截图前，应先确认采用了哪一种小尺寸规则以及像素对齐方式。