按钮和提示框放大时,整体缩放会让边框与圆角一起变粗。九宫格方法把四角、四边和中心分开,让固定边框与可伸缩内部遵循不同规则。
先固定规则和输入
源图按左、右、上、下固定边宽切成九块。目标尺寸不足以容纳两侧边框时,本例主动把尺寸抬到边框总和;四角大小保持,横边只横向拉伸,竖边只竖向拉伸,中心双向拉伸。
源尺寸[140, 82],边框[左,右,上,下][18, 15, 12, 17] 源横边界[0, 18, 125, 140],源纵边界[0, 12, 65, 82]
把结果按步骤记下来
请求[29, 26],实际尺寸[33, 29],横边界[0, 18, 18, 33],纵边界[0, 12, 12, 29];按先行后列的九块宽高[[18, 12], [0, 12], [15, 12], [18, 0], [0, 0], [15, 0], [18, 17], [0, 17], [15, 17]],总面积957。
请求[33, 29],实际尺寸[33, 29],横边界[0, 18, 18, 33],纵边界[0, 12, 12, 29];按先行后列的九块宽高[[18, 12], [0, 12], [15, 12], [18, 0], [0, 0], [15, 0], [18, 17], [0, 17], [15, 17]],总面积957。
请求[241, 88],实际尺寸[241, 88],横边界[0, 18, 226, 241],纵边界[0, 12, 71, 88];按先行后列的九块宽高[[18, 12], [208, 12], [15, 12], [18, 59], [208, 59], [15, 59], [18, 17], [208, 17], [15, 17]],总面积21208。
请求[80, 150],实际尺寸[80, 150],横边界[0, 18, 65, 80],纵边界[0, 12, 133, 150];按先行后列的九块宽高[[18, 12], [47, 12], [15, 12], [18, 121], [47, 121], [15, 121], [18, 17], [47, 17], [15, 17]],总面积12000。
请求[214, 184],实际尺寸[214, 184],横边界[0, 18, 199, 214],纵边界[0, 12, 167, 184];按先行后列的九块宽高[[18, 12], [181, 12], [15, 12], [18, 155], [181, 155], [15, 155], [18, 17], [181, 17], [15, 17]],总面积39376。
请求[130, 122],实际尺寸[130, 122],横边界[0, 18, 115, 130],纵边界[0, 12, 105, 122];按先行后列的九块宽高[[18, 12], [97, 12], [15, 12], [18, 93], [97, 93], [15, 93], [18, 17], [97, 17], [15, 17]],总面积15860。
请求[149, 180],实际尺寸[149, 180],横边界[0, 18, 134, 149],纵边界[0, 12, 163, 180];按先行后列的九块宽高[[18, 12], [116, 12], [15, 12], [18, 151], [116, 151], [15, 151], [18, 17], [116, 17], [15, 17]],总面积26820。
前两组专门检查小于或恰好等于最小尺寸时的退化中心,其余组检查正常伸缩。目标范围中不应出现负宽度或负高度。
自己复核的办法
所有源分块应该刚好覆盖源图;所有目标分块应该刚好覆盖实际目标。中心宽或高为零时允许退化为空区域,不要除以零去计算缩放倍率。
建议先遮住结果,用本例原始输入独立完成一遍,再逐项对照。若出现差异,先找最早不一致的位置,检查索引从零还是从一开始、边界是否包含,以及比较或更新发生的先后。只比较最后一个数,往往无法分辨规则理解与计算步骤分别出了什么问题。
使用这个练习的边界
这种最小尺寸处理是本练习的明确选择,并非所有界面系统都如此。实际实现也可能压缩边框或裁切内容。比较截图前,应先确认采用了哪一种小尺寸规则以及像素对齐方式。
