游戏动态

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

2026-11-04 1

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

先固定规则和输入

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

源尺寸[158, 113],边框[左,右,上,下][15, 8, 9, 21] 源横边界[0, 15, 150, 158],源纵边界[0, 9, 92, 113]

把结果按步骤记下来

请求[19, 27],实际尺寸[23, 30],横边界[0, 15, 15, 23],纵边界[0, 9, 9, 30];按先行后列的九块宽高[[15, 9], [0, 9], [8, 9], [15, 0], [0, 0], [8, 0], [15, 21], [0, 21], [8, 21]],总面积690。

请求[23, 30],实际尺寸[23, 30],横边界[0, 15, 15, 23],纵边界[0, 9, 9, 30];按先行后列的九块宽高[[15, 9], [0, 9], [8, 9], [15, 0], [0, 0], [8, 0], [15, 21], [0, 21], [8, 21]],总面积690。

请求[122, 98],实际尺寸[122, 98],横边界[0, 15, 114, 122],纵边界[0, 9, 77, 98];按先行后列的九块宽高[[15, 9], [99, 9], [8, 9], [15, 68], [99, 68], [8, 68], [15, 21], [99, 21], [8, 21]],总面积11956。

请求[191, 130],实际尺寸[191, 130],横边界[0, 15, 183, 191],纵边界[0, 9, 109, 130];按先行后列的九块宽高[[15, 9], [168, 9], [8, 9], [15, 100], [168, 100], [8, 100], [15, 21], [168, 21], [8, 21]],总面积24830。

请求[196, 134],实际尺寸[196, 134],横边界[0, 15, 188, 196],纵边界[0, 9, 113, 134];按先行后列的九块宽高[[15, 9], [173, 9], [8, 9], [15, 104], [173, 104], [8, 104], [15, 21], [173, 21], [8, 21]],总面积26264。

请求[239, 136],实际尺寸[239, 136],横边界[0, 15, 231, 239],纵边界[0, 9, 115, 136];按先行后列的九块宽高[[15, 9], [216, 9], [8, 9], [15, 106], [216, 106], [8, 106], [15, 21], [216, 21], [8, 21]],总面积32504。

请求[185, 175],实际尺寸[185, 175],横边界[0, 15, 177, 185],纵边界[0, 9, 154, 175];按先行后列的九块宽高[[15, 9], [162, 9], [8, 9], [15, 145], [162, 145], [8, 145], [15, 21], [162, 21], [8, 21]],总面积32375。

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

自己复核的办法

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

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

使用这个练习的边界

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