新闻动态

九宫格界面拉伸怎样保住四个角:七种目标尺寸的九宫格边框(实例07)

2026-11-04

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

先固定规则和输入

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

源尺寸[156, 70],边框[左,右,上,下][17, 13, 20, 18] 源横边界[0, 17, 143, 156],源纵边界[0, 20, 52, 70]

把结果按步骤记下来

请求[26, 35],实际尺寸[30, 38],横边界[0, 17, 17, 30],纵边界[0, 20, 20, 38];按先行后列的九块宽高[[17, 20], [0, 20], [13, 20], [17, 0], [0, 0], [13, 0], [17, 18], [0, 18], [13, 18]],总面积1140。

请求[30, 38],实际尺寸[30, 38],横边界[0, 17, 17, 30],纵边界[0, 20, 20, 38];按先行后列的九块宽高[[17, 20], [0, 20], [13, 20], [17, 0], [0, 0], [13, 0], [17, 18], [0, 18], [13, 18]],总面积1140。

请求[162, 150],实际尺寸[162, 150],横边界[0, 17, 149, 162],纵边界[0, 20, 132, 150];按先行后列的九块宽高[[17, 20], [132, 20], [13, 20], [17, 112], [132, 112], [13, 112], [17, 18], [132, 18], [13, 18]],总面积24300。

请求[63, 167],实际尺寸[63, 167],横边界[0, 17, 50, 63],纵边界[0, 20, 149, 167];按先行后列的九块宽高[[17, 20], [33, 20], [13, 20], [17, 129], [33, 129], [13, 129], [17, 18], [33, 18], [13, 18]],总面积10521。

请求[130, 193],实际尺寸[130, 193],横边界[0, 17, 117, 130],纵边界[0, 20, 175, 193];按先行后列的九块宽高[[17, 20], [100, 20], [13, 20], [17, 155], [100, 155], [13, 155], [17, 18], [100, 18], [13, 18]],总面积25090。

请求[136, 60],实际尺寸[136, 60],横边界[0, 17, 123, 136],纵边界[0, 20, 42, 60];按先行后列的九块宽高[[17, 20], [106, 20], [13, 20], [17, 22], [106, 22], [13, 22], [17, 18], [106, 18], [13, 18]],总面积8160。

请求[116, 149],实际尺寸[116, 149],横边界[0, 17, 103, 116],纵边界[0, 20, 131, 149];按先行后列的九块宽高[[17, 20], [86, 20], [13, 20], [17, 111], [86, 111], [13, 111], [17, 18], [86, 18], [13, 18]],总面积17284。

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

自己复核的办法

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

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

使用这个练习的边界

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