游戏面板拉伸时,边角装饰往往需要保持原尺寸,中间区域再吸收宽高变化。把图片切成三列三行,可以分别处理角、边和中心,避免把圆角和边框一起等比拉大。
下面使用一组独立练习数据,说明输入、规则、处理顺序和输出之间的关系。建议先遮住结果自己推演,再逐步对照;如果出现差异,应先定位第一处不同,并检查边界条件,不要只把最后的答案改成一样。
本例明确给出原图宽高及左右上下边距,目标宽高均大于对应边距之和。四角宽高保持,横边只横向拉伸,竖边只纵向拉伸,中心两轴拉伸;没有平铺、裁切或小于边框尺寸时的特殊规则。
原图56×26,左/右/上/下边距[10, 11, 4, 9] [[89, 52], [66, 77], [63, 53], [79, 35], [46, 23], [84, 27], [51, 40]]
目标89×52:三列宽[10, 68, 11]、三行高[4, 39, 9],中心横纵比例68/35、3;九块面积按行[[40, 272, 44], [390, 2652, 429], [90, 612, 99]],总面积4628。
目标66×77:三列宽[10, 45, 11]、三行高[4, 64, 9],中心横纵比例9/7、64/13;九块面积按行[[40, 180, 44], [640, 2880, 704], [90, 405, 99]],总面积5082。
目标63×53:三列宽[10, 42, 11]、三行高[4, 40, 9],中心横纵比例6/5、40/13;九块面积按行[[40, 168, 44], [400, 1680, 440], [90, 378, 99]],总面积3339。
目标79×35:三列宽[10, 58, 11]、三行高[4, 22, 9],中心横纵比例58/35、22/13;九块面积按行[[40, 232, 44], [220, 1276, 242], [90, 522, 99]],总面积2765。
目标46×23:三列宽[10, 25, 11]、三行高[4, 10, 9],中心横纵比例5/7、10/13;九块面积按行[[40, 100, 44], [100, 250, 110], [90, 225, 99]],总面积1058。
目标84×27:三列宽[10, 63, 11]、三行高[4, 14, 9],中心横纵比例9/5、14/13;九块面积按行[[40, 252, 44], [140, 882, 154], [90, 567, 99]],总面积2268。
目标51×40:三列宽[10, 30, 11]、三行高[4, 27, 9],中心横纵比例6/7、27/13;九块面积按行[[40, 120, 44], [270, 810, 297], [90, 270, 99]],总面积2040。
全部目标都保留四个角的原宽高,中央区域承担剩余尺寸。
把目标的横纵分界坐标分别写成四个递增值,相邻差就是三列和三行尺寸。九块面积相加必须正好等于目标面积,并且角块尺寸与原图相同;两项检查可发现漏缝和重叠。
横向和纵向的中心缩放比例可以不同,这正是拉伸面板与整张图片等比缩放的区别。若中心图案也必须保持比例,可以采用平铺或额外内容层,但那是另一种布局策略,不能混入本次面积核对。
这是一套明确限定的教学模型,实际作品可能采用其他约定。记录实验时,保留原始输入、每步状态以及规则版本;调整一个条件后重新演算,并检查起点、终点、重复输入和刚好位于边界的情况,才能知道差异来自设计还是计算。