缩略图自动生成背景服务插件

SpineThumbnailGenerateServer/js/spine-background.js

@@ -0,0 +1,31 @@
+// Node 里用 require，插件页面里用 <script> 标签挂到 window。
+(function () {
+'use strict';
+const patterns = new WeakMap();
+
+// Called with the same world-to-canvas transform used to draw the skeleton.
+function drawCheckerboard(ctx, width, height) {
+	let pattern = patterns.get(ctx);
+	if (!pattern) {
+		const tile = ctx.canvas.ownerDocument.createElement('canvas');
+		tile.width = tile.height = 100;
+		const paint = tile.getContext('2d');
+		paint.fillStyle = '#505052'; paint.fillRect(0, 0, 100, 100);
+		paint.fillStyle = '#5a5a5c'; paint.fillRect(0, 0, 50, 50); paint.fillRect(50, 50, 50, 50);
+		pattern = ctx.createPattern(tile, 'repeat'); patterns.set(ctx, pattern);
+	}
+	const m = ctx.getTransform().inverse();
+	const corners = [[0,0], [width,0], [width,height], [0,height]].map(([x,y]) => [m.a*x+m.c*y+m.e, m.b*x+m.d*y+m.f]);
+	const xs = corners.map(p => p[0]), ys = corners.map(p => p[1]);
+	const x = Math.min(...xs), y = Math.min(...ys);
+	if (!Number.isFinite(x + y)) return;
+	ctx.save();
+	try { ctx.imageSmoothingEnabled = false; ctx.fillStyle = pattern; ctx.fillRect(x, y, Math.max(...xs)-x, Math.max(...ys)-y); }
+	finally { ctx.restore(); }
+}
+
+const api = { drawCheckerboard };
+if (typeof window !== 'undefined') window.SpineBackground = api;
+else if (typeof module !== 'undefined' && module.exports) module.exports = api;
+
+})();