佛山市南海区桂城街道桂澜北路2号亿能国际广场2座511-B室(住所申报) 13706130838 jinnian@baidu.ag

新闻中心

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

2026-11-04

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

先固定规则和输入

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

源尺寸[169, 80],边框[左,右,上,下][20, 12, 10, 19] 源横边界[0, 20, 157, 169],源纵边界[0, 10, 61, 80]

把结果按步骤记下来

请求[28, 26],实际尺寸[32, 29],横边界[0, 20, 20, 32],纵边界[0, 10, 10, 29];按先行后列的九块宽高[[20, 10], [0, 10], [12, 10], [20, 0], [0, 0], [12, 0], [20, 19], [0, 19], [12, 19]],总面积928。

请求[32, 29],实际尺寸[32, 29],横边界[0, 20, 20, 32],纵边界[0, 10, 10, 29];按先行后列的九块宽高[[20, 10], [0, 10], [12, 10], [20, 0], [0, 0], [12, 0], [20, 19], [0, 19], [12, 19]],总面积928。

请求[254, 91],实际尺寸[254, 91],横边界[0, 20, 242, 254],纵边界[0, 10, 72, 91];按先行后列的九块宽高[[20, 10], [222, 10], [12, 10], [20, 62], [222, 62], [12, 62], [20, 19], [222, 19], [12, 19]],总面积23114。

请求[208, 55],实际尺寸[208, 55],横边界[0, 20, 196, 208],纵边界[0, 10, 36, 55];按先行后列的九块宽高[[20, 10], [176, 10], [12, 10], [20, 26], [176, 26], [12, 26], [20, 19], [176, 19], [12, 19]],总面积11440。

请求[238, 138],实际尺寸[238, 138],横边界[0, 20, 226, 238],纵边界[0, 10, 119, 138];按先行后列的九块宽高[[20, 10], [206, 10], [12, 10], [20, 109], [206, 109], [12, 109], [20, 19], [206, 19], [12, 19]],总面积32844。

请求[63, 198],实际尺寸[63, 198],横边界[0, 20, 51, 63],纵边界[0, 10, 179, 198];按先行后列的九块宽高[[20, 10], [31, 10], [12, 10], [20, 169], [31, 169], [12, 169], [20, 19], [31, 19], [12, 19]],总面积12474。

请求[242, 110],实际尺寸[242, 110],横边界[0, 20, 230, 242],纵边界[0, 10, 91, 110];按先行后列的九块宽高[[20, 10], [210, 10], [12, 10], [20, 81], [210, 81], [12, 81], [20, 19], [210, 19], [12, 19]],总面积26620。

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

自己复核的办法

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

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

使用这个练习的边界

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