游戏面板拉伸时,边角装饰往往需要保持原尺寸,中间区域再吸收宽高变化。把图片切成三列三行,可以分别处理角、边和中心,避免把圆角和边框一起等比拉大。
下面使用一组独立练习数据,说明输入、规则、处理顺序和输出之间的关系。建议先遮住结果自己推演,再逐步对照;如果出现差异,应先定位第一处不同,并检查边界条件,不要只把最后的答案改成一样。
规则和数据
本例明确给出原图宽高及左右上下边距,目标宽高均大于对应边距之和。四角宽高保持,横边只横向拉伸,竖边只纵向拉伸,中心两轴拉伸;没有平铺、裁切或小于边框尺寸时的特殊规则。
原图49×41,左/右/上/下边距[6, 9, 6, 12] [[48, 73], [43, 77], [46, 39], [62, 26], [71, 51], [27, 66], [89, 54]]
逐步推演
目标48×73:三列宽[6, 33, 9]、三行高[6, 55, 12],中心横纵比例33/34、55/23;九块面积按行[[36, 198, 54], [330, 1815, 495], [72, 396, 108]],总面积3504。
目标43×77:三列宽[6, 28, 9]、三行高[6, 59, 12],中心横纵比例14/17、59/23;九块面积按行[[36, 168, 54], [354, 1652, 531], [72, 336, 108]],总面积3311。
目标46×39:三列宽[6, 31, 9]、三行高[6, 21, 12],中心横纵比例31/34、21/23;九块面积按行[[36, 186, 54], [126, 651, 189], [72, 372, 108]],总面积1794。
目标62×26:三列宽[6, 47, 9]、三行高[6, 8, 12],中心横纵比例47/34、8/23;九块面积按行[[36, 282, 54], [48, 376, 72], [72, 564, 108]],总面积1612。
目标71×51:三列宽[6, 56, 9]、三行高[6, 33, 12],中心横纵比例28/17、33/23;九块面积按行[[36, 336, 54], [198, 1848, 297], [72, 672, 108]],总面积3621。
目标27×66:三列宽[6, 12, 9]、三行高[6, 48, 12],中心横纵比例6/17、48/23;九块面积按行[[36, 72, 54], [288, 576, 432], [72, 144, 108]],总面积1782。
目标89×54:三列宽[6, 74, 9]、三行高[6, 36, 12],中心横纵比例37/17、36/23;九块面积按行[[36, 444, 54], [216, 2664, 324], [72, 888, 108]],总面积4806。
全部目标都保留四个角的原宽高,中央区域承担剩余尺寸。
如何复核与应用
把目标的横纵分界坐标分别写成四个递增值,相邻差就是三列和三行尺寸。九块面积相加必须正好等于目标面积,并且角块尺寸与原图相同;两项检查可发现漏缝和重叠。
横向和纵向的中心缩放比例可以不同,这正是拉伸面板与整张图片等比缩放的区别。若中心图案也必须保持比例,可以采用平铺或额外内容层,但那是另一种布局策略,不能混入本次面积核对。
这是一套明确限定的教学模型,实际作品可能采用其他约定。记录实验时,保留原始输入、每步状态以及规则版本;调整一个条件后重新演算,并检查起点、终点、重复输入和刚好位于边界的情况,才能知道差异来自设计还是计算。
