游戏面板拉伸时,边角装饰往往需要保持原尺寸,中间区域再吸收宽高变化。把图片切成三列三行,可以分别处理角、边和中心,避免把圆角和边框一起等比拉大。
下面使用一组独立练习数据,说明输入、规则、处理顺序和输出之间的关系。建议先遮住结果自己推演,再逐步对照;如果出现差异,应先定位第一处不同,并检查边界条件,不要只把最后的答案改成一样。
本例明确给出原图宽高及左右上下边距,目标宽高均大于对应边距之和。四角宽高保持,横边只横向拉伸,竖边只纵向拉伸,中心两轴拉伸;没有平铺、裁切或小于边框尺寸时的特殊规则。
原图30×49,左/右/上/下边距[8, 7, 9, 6] [[75, 45], [88, 49], [35, 54], [67, 56], [48, 21], [72, 54], [48, 60]]
目标75×45:三列宽[8, 60, 7]、三行高[9, 30, 6],中心横纵比例4、15/17;九块面积按行[[72, 540, 63], [240, 1800, 210], [48, 360, 42]],总面积3375。
目标88×49:三列宽[8, 73, 7]、三行高[9, 34, 6],中心横纵比例73/15、1;九块面积按行[[72, 657, 63], [272, 2482, 238], [48, 438, 42]],总面积4312。
目标35×54:三列宽[8, 20, 7]、三行高[9, 39, 6],中心横纵比例4/3、39/34;九块面积按行[[72, 180, 63], [312, 780, 273], [48, 120, 42]],总面积1890。
目标67×56:三列宽[8, 52, 7]、三行高[9, 41, 6],中心横纵比例52/15、41/34;九块面积按行[[72, 468, 63], [328, 2132, 287], [48, 312, 42]],总面积3752。
目标48×21:三列宽[8, 33, 7]、三行高[9, 6, 6],中心横纵比例11/5、3/17;九块面积按行[[72, 297, 63], [48, 198, 42], [48, 198, 42]],总面积1008。
目标72×54:三列宽[8, 57, 7]、三行高[9, 39, 6],中心横纵比例19/5、39/34;九块面积按行[[72, 513, 63], [312, 2223, 273], [48, 342, 42]],总面积3888。
目标48×60:三列宽[8, 33, 7]、三行高[9, 45, 6],中心横纵比例11/5、45/34;九块面积按行[[72, 297, 63], [360, 1485, 315], [48, 198, 42]],总面积2880。
全部目标都保留四个角的原宽高,中央区域承担剩余尺寸。
把目标的横纵分界坐标分别写成四个递增值,相邻差就是三列和三行尺寸。九块面积相加必须正好等于目标面积,并且角块尺寸与原图相同;两项检查可发现漏缝和重叠。
横向和纵向的中心缩放比例可以不同,这正是拉伸面板与整张图片等比缩放的区别。若中心图案也必须保持比例,可以采用平铺或额外内容层,但那是另一种布局策略,不能混入本次面积核对。
这是一套明确限定的教学模型,实际作品可能采用其他约定。记录实验时,保留原始输入、每步状态以及规则版本;调整一个条件后重新演算,并检查起点、终点、重复输入和刚好位于边界的情况,才能知道差异来自设计还是计算。