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

先固定规则和输入

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

源尺寸[128, 117],边框[左,右,上,下][12, 9, 19, 18] 源横边界[0, 12, 119, 128],源纵边界[0, 19, 99, 117]

把结果按步骤记下来

请求[17, 34],实际尺寸[21, 37],横边界[0, 12, 12, 21],纵边界[0, 19, 19, 37];按先行后列的九块宽高[[12, 19], [0, 19], [9, 19], [12, 0], [0, 0], [9, 0], [12, 18], [0, 18], [9, 18]],总面积777。

请求[21, 37],实际尺寸[21, 37],横边界[0, 12, 12, 21],纵边界[0, 19, 19, 37];按先行后列的九块宽高[[12, 19], [0, 19], [9, 19], [12, 0], [0, 0], [9, 0], [12, 18], [0, 18], [9, 18]],总面积777。

请求[241, 76],实际尺寸[241, 76],横边界[0, 12, 232, 241],纵边界[0, 19, 58, 76];按先行后列的九块宽高[[12, 19], [220, 19], [9, 19], [12, 39], [220, 39], [9, 39], [12, 18], [220, 18], [9, 18]],总面积18316。

请求[108, 76],实际尺寸[108, 76],横边界[0, 12, 99, 108],纵边界[0, 19, 58, 76];按先行后列的九块宽高[[12, 19], [87, 19], [9, 19], [12, 39], [87, 39], [9, 39], [12, 18], [87, 18], [9, 18]],总面积8208。

请求[125, 73],实际尺寸[125, 73],横边界[0, 12, 116, 125],纵边界[0, 19, 55, 73];按先行后列的九块宽高[[12, 19], [104, 19], [9, 19], [12, 36], [104, 36], [9, 36], [12, 18], [104, 18], [9, 18]],总面积9125。

请求[128, 65],实际尺寸[128, 65],横边界[0, 12, 119, 128],纵边界[0, 19, 47, 65];按先行后列的九块宽高[[12, 19], [107, 19], [9, 19], [12, 28], [107, 28], [9, 28], [12, 18], [107, 18], [9, 18]],总面积8320。

请求[48, 48],实际尺寸[48, 48],横边界[0, 12, 39, 48],纵边界[0, 19, 30, 48];按先行后列的九块宽高[[12, 19], [27, 19], [9, 19], [12, 11], [27, 11], [9, 11], [12, 18], [27, 18], [9, 18]],总面积2304。

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

自己复核的办法

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

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

使用这个练习的边界

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