加入3.5 修复水印

viewer/spine.html

@@ -139,6 +139,9 @@
 		<label title="用于以 Premultiplied Alpha（PMA）方式导出的贴图">
 			<input type="checkbox" id="pmaCheck" disabled> 预乘
 		</label>
+		<label title="50×50 方格背景，随画布移动和缩放，并参与混合模式">
+			<input type="checkbox" id="backgroundCheck" checked> 背景
+		</label>
 		<div class="spacer"></div>
 		<button id="thumbBtn" title="使用当前帧生成 400×400 缩略图">🖼 生成缩略图</button>
 		<label id="verLabel" style="color: var(--text-dim);" title="Spine 版本"></label>
@@ -390,6 +393,7 @@
 		}
 		ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
 		ctx.clearRect(0, 0, cw, ch);
+		ctx.fillStyle = '#1e1e1e'; ctx.fillRect(0, 0, cw, ch);
 		if (!skeleton || !renderer) return;
 		ctx.save();
 		// 居中 + 缩放 + Y 翻转，使 Spine 坐标正确映射到 Canvas。
@@ -397,6 +401,7 @@
 		ctx.translate(cw / 2 + panX, ch / 2 + panY);
 		ctx.scale(fitScale, -fitScale);
 		ctx.translate(-fitCx, -fitCy);
+		if (document.getElementById('backgroundCheck').checked) require('../js/spine-background.js').drawCheckerboard(ctx, canvas.width, canvas.height);
 		renderer.draw(skeleton);
 		ctx.restore();
 	}
@@ -466,6 +471,7 @@
 				octx.translate(size / 2, size / 2);
 				octx.scale(scale, -scale);
 				octx.translate(-cx, -cy);
+				if (document.getElementById('backgroundCheck').checked) require('../js/spine-background.js').drawCheckerboard(octx, size, size);
 				let offRenderer = null;
 				try {
 					offRenderer = clippingRenderer.createRenderer(spine, octx, activeRuntimeDir);
@@ -477,7 +483,7 @@
 				}
 			}
 			await drawSpineBadge(octx, size, size);
-			require('../js/spine-badge.js').drawVersion(octx, size, size, activeVersion);
+			require('../js/spine-badge.js').drawVersion(octx, size, size, skeletonData.version || activeVersion);
 
 			// Eagle 的 *_thumbnail.png 通常实际保存 WebP；优先使用 WebP 显著减小体积。
 			let out = off.toDataURL('image/webp', 0.9);
@@ -860,7 +866,7 @@
 		activeVersion = version;
 		const runtimeDir = utils.chooseRuntimeDir(version, assets.isBinary);
 		if (!runtimeDir) {
-			showError('版本不支持', '无法识别的 Spine 版本：' + (version || '未知') + '\n支持的版本：3.4 / 3.6 / 3.7 / 3.8 / 4.0 / 4.1 / 4.2 / 4.3');
+			showError('版本不支持', '无法识别的 Spine 版本：' + (version || '未知') + '\n支持的版本：3.4 / 3.5 / 3.6 / 3.7 / 3.8 / 4.0 / 4.1 / 4.2 / 4.3');
 			return;
 		}
 		activeRuntimeDir = runtimeDir;
@@ -983,6 +989,7 @@
 		speed = parseFloat(e.target.value);
 		document.getElementById('speedVal').textContent = speed.toFixed(2) + 'x';
 	});
+	document.getElementById('backgroundCheck').addEventListener('change', () => draw());
 	document.getElementById('pmaCheck').addEventListener('change', (e) => {
 		premultipliedAlpha = e.target.checked;
 		if (renderer) renderer.premultipliedAlpha = premultipliedAlpha;