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

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

先固定规则和输入

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

源尺寸[126, 92]，边框[左,右,上,下][16, 11, 22, 9] 源横边界[0, 16, 115, 126]，源纵边界[0, 22, 83, 92]

把结果按步骤记下来

请求[23, 28]，实际尺寸[27, 31]，横边界[0, 16, 16, 27]，纵边界[0, 22, 22, 31]；按先行后列的九块宽高[[16, 22], [0, 22], [11, 22], [16, 0], [0, 0], [11, 0], [16, 9], [0, 9], [11, 9]]，总面积837。

请求[27, 31]，实际尺寸[27, 31]，横边界[0, 16, 16, 27]，纵边界[0, 22, 22, 31]；按先行后列的九块宽高[[16, 22], [0, 22], [11, 22], [16, 0], [0, 0], [11, 0], [16, 9], [0, 9], [11, 9]]，总面积837。

请求[230, 117]，实际尺寸[230, 117]，横边界[0, 16, 219, 230]，纵边界[0, 22, 108, 117]；按先行后列的九块宽高[[16, 22], [203, 22], [11, 22], [16, 86], [203, 86], [11, 86], [16, 9], [203, 9], [11, 9]]，总面积26910。

请求[156, 172]，实际尺寸[156, 172]，横边界[0, 16, 145, 156]，纵边界[0, 22, 163, 172]；按先行后列的九块宽高[[16, 22], [129, 22], [11, 22], [16, 141], [129, 141], [11, 141], [16, 9], [129, 9], [11, 9]]，总面积26832。

请求[95, 78]，实际尺寸[95, 78]，横边界[0, 16, 84, 95]，纵边界[0, 22, 69, 78]；按先行后列的九块宽高[[16, 22], [68, 22], [11, 22], [16, 47], [68, 47], [11, 47], [16, 9], [68, 9], [11, 9]]，总面积7410。

请求[172, 157]，实际尺寸[172, 157]，横边界[0, 16, 161, 172]，纵边界[0, 22, 148, 157]；按先行后列的九块宽高[[16, 22], [145, 22], [11, 22], [16, 126], [145, 126], [11, 126], [16, 9], [145, 9], [11, 9]]，总面积27004。

请求[136, 189]，实际尺寸[136, 189]，横边界[0, 16, 125, 136]，纵边界[0, 22, 180, 189]；按先行后列的九块宽高[[16, 22], [109, 22], [11, 22], [16, 158], [109, 158], [11, 158], [16, 9], [109, 9], [11, 9]]，总面积25704。

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

自己复核的办法

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

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

使用这个练习的边界

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