按钮和提示框放大时,整体缩放会让边框与圆角一起变粗。九宫格方法把四角、四边和中心分开,让固定边框与可伸缩内部遵循不同规则。
先固定规则和输入
源图按左、右、上、下固定边宽切成九块。目标尺寸不足以容纳两侧边框时,本例主动把尺寸抬到边框总和;四角大小保持,横边只横向拉伸,竖边只竖向拉伸,中心双向拉伸。
源尺寸[142, 103],边框[左,右,上,下][7, 16, 18, 8] 源横边界[0, 7, 126, 142],源纵边界[0, 18, 95, 103]
把结果按步骤记下来
请求[19, 23],实际尺寸[23, 26],横边界[0, 7, 7, 23],纵边界[0, 18, 18, 26];按先行后列的九块宽高[[7, 18], [0, 18], [16, 18], [7, 0], [0, 0], [16, 0], [7, 8], [0, 8], [16, 8]],总面积598。
请求[23, 26],实际尺寸[23, 26],横边界[0, 7, 7, 23],纵边界[0, 18, 18, 26];按先行后列的九块宽高[[7, 18], [0, 18], [16, 18], [7, 0], [0, 0], [16, 0], [7, 8], [0, 8], [16, 8]],总面积598。
请求[237, 71],实际尺寸[237, 71],横边界[0, 7, 221, 237],纵边界[0, 18, 63, 71];按先行后列的九块宽高[[7, 18], [214, 18], [16, 18], [7, 45], [214, 45], [16, 45], [7, 8], [214, 8], [16, 8]],总面积16827。
请求[58, 78],实际尺寸[58, 78],横边界[0, 7, 42, 58],纵边界[0, 18, 70, 78];按先行后列的九块宽高[[7, 18], [35, 18], [16, 18], [7, 52], [35, 52], [16, 52], [7, 8], [35, 8], [16, 8]],总面积4524。
请求[60, 172],实际尺寸[60, 172],横边界[0, 7, 44, 60],纵边界[0, 18, 164, 172];按先行后列的九块宽高[[7, 18], [37, 18], [16, 18], [7, 146], [37, 146], [16, 146], [7, 8], [37, 8], [16, 8]],总面积10320。
请求[220, 61],实际尺寸[220, 61],横边界[0, 7, 204, 220],纵边界[0, 18, 53, 61];按先行后列的九块宽高[[7, 18], [197, 18], [16, 18], [7, 35], [197, 35], [16, 35], [7, 8], [197, 8], [16, 8]],总面积13420。
请求[142, 116],实际尺寸[142, 116],横边界[0, 7, 126, 142],纵边界[0, 18, 108, 116];按先行后列的九块宽高[[7, 18], [119, 18], [16, 18], [7, 90], [119, 90], [16, 90], [7, 8], [119, 8], [16, 8]],总面积16472。
前两组专门检查小于或恰好等于最小尺寸时的退化中心,其余组检查正常伸缩。目标范围中不应出现负宽度或负高度。
自己复核的办法
所有源分块应该刚好覆盖源图;所有目标分块应该刚好覆盖实际目标。中心宽或高为零时允许退化为空区域,不要除以零去计算缩放倍率。
建议先遮住结果,用本例原始输入独立完成一遍,再逐项对照。若出现差异,先找最早不一致的位置,检查索引从零还是从一开始、边界是否包含,以及比较或更新发生的先后。只比较最后一个数,往往无法分辨规则理解与计算步骤分别出了什么问题。
使用这个练习的边界
这种最小尺寸处理是本练习的明确选择,并非所有界面系统都如此。实际实现也可能压缩边框或裁切内容。比较截图前,应先确认采用了哪一种小尺寸规则以及像素对齐方式。
