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

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

先固定规则和输入

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

源尺寸[100, 98]，边框[左,右,上,下][7, 12, 11, 13] 源横边界[0, 7, 88, 100]，源纵边界[0, 11, 85, 98]

把结果按步骤记下来

请求[15, 21]，实际尺寸[19, 24]，横边界[0, 7, 7, 19]，纵边界[0, 11, 11, 24]；按先行后列的九块宽高[[7, 11], [0, 11], [12, 11], [7, 0], [0, 0], [12, 0], [7, 13], [0, 13], [12, 13]]，总面积456。

请求[19, 24]，实际尺寸[19, 24]，横边界[0, 7, 7, 19]，纵边界[0, 11, 11, 24]；按先行后列的九块宽高[[7, 11], [0, 11], [12, 11], [7, 0], [0, 0], [12, 0], [7, 13], [0, 13], [12, 13]]，总面积456。

请求[50, 155]，实际尺寸[50, 155]，横边界[0, 7, 38, 50]，纵边界[0, 11, 142, 155]；按先行后列的九块宽高[[7, 11], [31, 11], [12, 11], [7, 131], [31, 131], [12, 131], [7, 13], [31, 13], [12, 13]]，总面积7750。

请求[53, 104]，实际尺寸[53, 104]，横边界[0, 7, 41, 53]，纵边界[0, 11, 91, 104]；按先行后列的九块宽高[[7, 11], [34, 11], [12, 11], [7, 80], [34, 80], [12, 80], [7, 13], [34, 13], [12, 13]]，总面积5512。

请求[89, 148]，实际尺寸[89, 148]，横边界[0, 7, 77, 89]，纵边界[0, 11, 135, 148]；按先行后列的九块宽高[[7, 11], [70, 11], [12, 11], [7, 124], [70, 124], [12, 124], [7, 13], [70, 13], [12, 13]]，总面积13172。

请求[151, 142]，实际尺寸[151, 142]，横边界[0, 7, 139, 151]，纵边界[0, 11, 129, 142]；按先行后列的九块宽高[[7, 11], [132, 11], [12, 11], [7, 118], [132, 118], [12, 118], [7, 13], [132, 13], [12, 13]]，总面积21442。

请求[69, 168]，实际尺寸[69, 168]，横边界[0, 7, 57, 69]，纵边界[0, 11, 155, 168]；按先行后列的九块宽高[[7, 11], [50, 11], [12, 11], [7, 144], [50, 144], [12, 144], [7, 13], [50, 13], [12, 13]]，总面积11592。

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

自己复核的办法

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

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

使用这个练习的边界

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