游戏面板拉伸时,边角装饰往往需要保持原尺寸,中间区域再吸收宽高变化。把图片切成三列三行,可以分别处理角、边和中心,避免把圆角和边框一起等比拉大。
下面使用一组独立练习数据,说明输入、规则、处理顺序和输出之间的关系。建议先遮住结果自己推演,再逐步对照;如果出现差异,应先定位第一处不同,并检查边界条件,不要只把最后的答案改成一样。
规则和数据
本例明确给出原图宽高及左右上下边距,目标宽高均大于对应边距之和。四角宽高保持,横边只横向拉伸,竖边只纵向拉伸,中心两轴拉伸;没有平铺、裁切或小于边框尺寸时的特殊规则。
原图46×25,左/右/上/下边距[6, 11, 4, 3] [[89, 69], [74, 33], [33, 21], [61, 49], [40, 67], [91, 30], [22, 32]]
逐步推演
目标89×69:三列宽[6, 72, 11]、三行高[4, 62, 3],中心横纵比例72/29、31/9;九块面积按行[[24, 288, 44], [372, 4464, 682], [18, 216, 33]],总面积6141。
目标74×33:三列宽[6, 57, 11]、三行高[4, 26, 3],中心横纵比例57/29、13/9;九块面积按行[[24, 228, 44], [156, 1482, 286], [18, 171, 33]],总面积2442。
目标33×21:三列宽[6, 16, 11]、三行高[4, 14, 3],中心横纵比例16/29、7/9;九块面积按行[[24, 64, 44], [84, 224, 154], [18, 48, 33]],总面积693。
目标61×49:三列宽[6, 44, 11]、三行高[4, 42, 3],中心横纵比例44/29、7/3;九块面积按行[[24, 176, 44], [252, 1848, 462], [18, 132, 33]],总面积2989。
目标40×67:三列宽[6, 23, 11]、三行高[4, 60, 3],中心横纵比例23/29、10/3;九块面积按行[[24, 92, 44], [360, 1380, 660], [18, 69, 33]],总面积2680。
目标91×30:三列宽[6, 74, 11]、三行高[4, 23, 3],中心横纵比例74/29、23/18;九块面积按行[[24, 296, 44], [138, 1702, 253], [18, 222, 33]],总面积2730。
目标22×32:三列宽[6, 5, 11]、三行高[4, 25, 3],中心横纵比例5/29、25/18;九块面积按行[[24, 20, 44], [150, 125, 275], [18, 15, 33]],总面积704。
全部目标都保留四个角的原宽高,中央区域承担剩余尺寸。
如何复核与应用
把目标的横纵分界坐标分别写成四个递增值,相邻差就是三列和三行尺寸。九块面积相加必须正好等于目标面积,并且角块尺寸与原图相同;两项检查可发现漏缝和重叠。
横向和纵向的中心缩放比例可以不同,这正是拉伸面板与整张图片等比缩放的区别。若中心图案也必须保持比例,可以采用平铺或额外内容层,但那是另一种布局策略,不能混入本次面积核对。
这是一套明确限定的教学模型,实际作品可能采用其他约定。记录实验时,保留原始输入、每步状态以及规则版本;调整一个条件后重新演算,并检查起点、终点、重复输入和刚好位于边界的情况,才能知道差异来自设计还是计算。
