九宫格界面拉伸怎样保住四个角:七种目标尺寸的九宫格边框(实例05)
按钮和提示框放大时,整体缩放会让边框与圆角一起变粗。九宫格方法把四角、四边和中心分开,让固定边框与可伸缩内部遵循不同规则。
先固定规则和输入
源图按左、右、上、下固定边宽切成九块。目标尺寸不足以容纳两侧边框时,本例主动把尺寸抬到边框总和;四角大小保持,横边只横向拉伸,竖边只竖向拉伸,中心双向拉伸。
源尺寸[171, 95],边框[左,右,上,下][13, 12, 18, 22] 源横边界[0, 13, 159, 171],源纵边界[0, 18, 73, 95]
把结果按步骤记下来
请求[21, 37],实际尺寸[25, 40],横边界[0, 13, 13, 25],纵边界[0, 18, 18, 40];按先行后列的九块宽高[[13, 18], [0, 18], [12, 18], [13, 0], [0, 0], [12, 0], [13, 22], [0, 22], [12, 22]],总面积1000。
请求[25, 40],实际尺寸[25, 40],横边界[0, 13, 13, 25],纵边界[0, 18, 18, 40];按先行后列的九块宽高[[13, 18], [0, 18], [12, 18], [13, 0], [0, 0], [12, 0], [13, 22], [0, 22], [12, 22]],总面积1000。
请求[101, 57],实际尺寸[101, 57],横边界[0, 13, 89, 101],纵边界[0, 18, 35, 57];按先行后列的九块宽高[[13, 18], [76, 18], [12, 18], [13, 17], [76, 17], [12, 17], [13, 22], [76, 22], [12, 22]],总面积5757。
请求[120, 177],实际尺寸[120, 177],横边界[0, 13, 108, 120],纵边界[0, 18, 155, 177];按先行后列的九块宽高[[13, 18], [95, 18], [12, 18], [13, 137], [95, 137], [12, 137], [13, 22], [95, 22], [12, 22]],总面积21240。
请求[176, 136],实际尺寸[176, 136],横边界[0, 13, 164, 176],纵边界[0, 18, 114, 136];按先行后列的九块宽高[[13, 18], [151, 18], [12, 18], [13, 96], [151, 96], [12, 96], [13, 22], [151, 22], [12, 22]],总面积23936。
请求[156, 137],实际尺寸[156, 137],横边界[0, 13, 144, 156],纵边界[0, 18, 115, 137];按先行后列的九块宽高[[13, 18], [131, 18], [12, 18], [13, 97], [131, 97], [12, 97], [13, 22], [131, 22], [12, 22]],总面积21372。
请求[240, 161],实际尺寸[240, 161],横边界[0, 13, 228, 240],纵边界[0, 18, 139, 161];按先行后列的九块宽高[[13, 18], [215, 18], [12, 18], [13, 121], [215, 121], [12, 121], [13, 22], [215, 22], [12, 22]],总面积38640。
前两组专门检查小于或恰好等于最小尺寸时的退化中心,其余组检查正常伸缩。目标范围中不应出现负宽度或负高度。
自己复核的办法
所有源分块应该刚好覆盖源图;所有目标分块应该刚好覆盖实际目标。中心宽或高为零时允许退化为空区域,不要除以零去计算缩放倍率。
建议先遮住结果,用本例原始输入独立完成一遍,再逐项对照。若出现差异,先找最早不一致的位置,检查索引从零还是从一开始、边界是否包含,以及比较或更新发生的先后。只比较最后一个数,往往无法分辨规则理解与计算步骤分别出了什么问题。
使用这个练习的边界
这种最小尺寸处理是本练习的明确选择,并非所有界面系统都如此。实际实现也可能压缩边框或裁切内容。比较截图前,应先确认采用了哪一种小尺寸规则以及像素对齐方式。