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

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

规则和数据

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

原图25×29,左/右/上/下边距[3, 4, 4, 11] [[39, 20], [79, 77], [24, 70], [82, 77], [12, 27], [15, 52], [19, 56]]

逐步推演

目标39×20:三列宽[3, 32, 4]、三行高[4, 5, 11],中心横纵比例16/9、5/14;九块面积按行[[12, 128, 16], [15, 160, 20], [33, 352, 44]],总面积780。

目标79×77:三列宽[3, 72, 4]、三行高[4, 62, 11],中心横纵比例4、31/7;九块面积按行[[12, 288, 16], [186, 4464, 248], [33, 792, 44]],总面积6083。

目标24×70:三列宽[3, 17, 4]、三行高[4, 55, 11],中心横纵比例17/18、55/14;九块面积按行[[12, 68, 16], [165, 935, 220], [33, 187, 44]],总面积1680。

目标82×77:三列宽[3, 75, 4]、三行高[4, 62, 11],中心横纵比例25/6、31/7;九块面积按行[[12, 300, 16], [186, 4650, 248], [33, 825, 44]],总面积6314。

目标12×27:三列宽[3, 5, 4]、三行高[4, 12, 11],中心横纵比例5/18、6/7;九块面积按行[[12, 20, 16], [36, 60, 48], [33, 55, 44]],总面积324。

目标15×52:三列宽[3, 8, 4]、三行高[4, 37, 11],中心横纵比例4/9、37/14;九块面积按行[[12, 32, 16], [111, 296, 148], [33, 88, 44]],总面积780。

目标19×56:三列宽[3, 12, 4]、三行高[4, 41, 11],中心横纵比例2/3、41/14;九块面积按行[[12, 48, 16], [123, 492, 164], [33, 132, 44]],总面积1064。

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

如何复核与应用

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

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

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