游戏机制笔记：九宫格界面缩放如何保留边角——36×33面板的七种尺寸（例04）

游戏面板拉伸时，边角装饰往往需要保持原尺寸，中间区域再吸收宽高变化。把图片切成三列三行，可以分别处理角、边和中心，避免把圆角和边框一起等比拉大。

下面使用一组独立练习数据，说明输入、规则、处理顺序和输出之间的关系。建议先遮住结果自己推演，再逐步对照；如果出现差异，应先定位第一处不同，并检查边界条件，不要只把最后的答案改成一样。

规则和数据

本例明确给出原图宽高及左右上下边距，目标宽高均大于对应边距之和。四角宽高保持，横边只横向拉伸，竖边只纵向拉伸，中心两轴拉伸；没有平铺、裁切或小于边框尺寸时的特殊规则。

原图36×33，左/右/上/下边距[6, 4, 6, 12] [[23, 58], [44, 44], [29, 45], [42, 33], [21, 25], [75, 23], [20, 26]]

逐步推演

目标23×58：三列宽[6, 13, 4]、三行高[6, 40, 12]，中心横纵比例1/2、8/3；九块面积按行[[36, 78, 24], [240, 520, 160], [72, 156, 48]]，总面积1334。

目标44×44：三列宽[6, 34, 4]、三行高[6, 26, 12]，中心横纵比例17/13、26/15；九块面积按行[[36, 204, 24], [156, 884, 104], [72, 408, 48]]，总面积1936。

目标29×45：三列宽[6, 19, 4]、三行高[6, 27, 12]，中心横纵比例19/26、9/5；九块面积按行[[36, 114, 24], [162, 513, 108], [72, 228, 48]]，总面积1305。

目标42×33：三列宽[6, 32, 4]、三行高[6, 15, 12]，中心横纵比例16/13、1；九块面积按行[[36, 192, 24], [90, 480, 60], [72, 384, 48]]，总面积1386。

目标21×25：三列宽[6, 11, 4]、三行高[6, 7, 12]，中心横纵比例11/26、7/15；九块面积按行[[36, 66, 24], [42, 77, 28], [72, 132, 48]]，总面积525。

目标75×23：三列宽[6, 65, 4]、三行高[6, 5, 12]，中心横纵比例5/2、1/3；九块面积按行[[36, 390, 24], [30, 325, 20], [72, 780, 48]]，总面积1725。

目标20×26：三列宽[6, 10, 4]、三行高[6, 8, 12]，中心横纵比例5/13、8/15；九块面积按行[[36, 60, 24], [48, 80, 32], [72, 120, 48]]，总面积520。

全部目标都保留四个角的原宽高，中央区域承担剩余尺寸。

如何复核与应用

把目标的横纵分界坐标分别写成四个递增值，相邻差就是三列和三行尺寸。九块面积相加必须正好等于目标面积，并且角块尺寸与原图相同；两项检查可发现漏缝和重叠。

横向和纵向的中心缩放比例可以不同，这正是拉伸面板与整张图片等比缩放的区别。若中心图案也必须保持比例，可以采用平铺或额外内容层，但那是另一种布局策略，不能混入本次面积核对。

这是一套明确限定的教学模型，实际作品可能采用其他约定。记录实验时，保留原始输入、每步状态以及规则版本；调整一个条件后重新演算，并检查起点、终点、重复输入和刚好位于边界的情况，才能知道差异来自设计还是计算。