加入3.5 修复水印

js/spine-canvas-clipping.js

@@ -5,6 +5,7 @@
 // SkeletonClipping so the viewer matches Spine's draw order and clipping rules.
 
 const QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
+const BLEND_MODES = ['source-over', 'lighter', 'multiply', 'screen'];
 const unpremultipliedImages = new WeakMap();
 
 function rendererConstructor(spine) {
@@ -96,6 +97,7 @@ function createLegacyRenderer(spine, context) {
 	const dark = new spine.Color(0, 0, 0, 0);
 
 	base.draw = function drawWithClipping(skeleton) {
+		const composite = context.globalCompositeOperation;
 		const drawOrder = skeleton.drawOrder;
 		const pma = !!base.premultipliedAlpha;
 		try {
@@ -131,6 +133,7 @@ function createLegacyRenderer(spine, context) {
 					const image = imageForCanvas(imageFromAttachment(attachment), context, pma);
 					if (!image) continue;
 					context.globalAlpha = base.tempColor.a;
+					context.globalCompositeOperation = BLEND_MODES[slot.data.blendMode] || 'source-over';
 					if (clipper.isClipping()) {
 						const unpacked = unpackVertices(vertices, vertexCount);
 						clipper.clipTriangles(unpacked.positions, unpacked.positions.length,
@@ -146,18 +149,20 @@ function createLegacyRenderer(spine, context) {
 		} finally {
 			clipper.clipEnd();
 			context.globalAlpha = 1;
+			context.globalCompositeOperation = composite;
 		}
 	};
 	base.clipper = clipper;
 	return base;
 }
 
-// 3.4 predates clipping attachments and computes packed vertices on attachments.
+// 3.4/3.5 predate clipping attachments and compute packed vertices on attachments.
 function create34Renderer(spine, context) {
 	const base = new (rendererConstructor(spine))(context);
 	base.triangleRendering = true;
 	base.premultipliedAlpha = false;
 	base.draw = skeleton => {
+		const composite = context.globalCompositeOperation;
 		try {
 			for (const slot of skeleton.drawOrder) {
 				const attachment = slot.getAttachment();
@@ -166,9 +171,10 @@ function create34Renderer(spine, context) {
 				const image = imageForCanvas(imageFromAttachment(attachment), context, base.premultipliedAlpha);
 				if (!image) continue;
 				context.globalAlpha = vertices[5];
+				context.globalCompositeOperation = BLEND_MODES[slot.data.blendMode] || 'source-over';
 				drawInterleaved(base, image, vertices, attachment instanceof spine.MeshAttachment ? attachment.triangles : QUAD_TRIANGLES);
 			}
-		} finally { context.globalAlpha = 1; }
+		} finally { context.globalAlpha = 1; context.globalCompositeOperation = composite; }
 	};
 	return base;
 }
@@ -182,6 +188,7 @@ function create43Renderer(spine, context) {
 	const core = new spine.SkeletonRendererCore();
 
 	base.draw = function drawWithCoreClipping(skeleton) {
+		const composite = context.globalCompositeOperation;
 		try {
 			const pma = !!base.premultipliedAlpha;
 			for (let command = core.render(skeleton, pma); command; command = command.next) {
@@ -189,6 +196,7 @@ function create43Renderer(spine, context) {
 				const image = imageForCanvas(sourceImage, context, pma);
 				if (!image) continue;
 				context.globalAlpha = ((command.colors[0] >>> 24) & 255) / 255;
+				context.globalCompositeOperation = BLEND_MODES[command.blendMode] || 'source-over';
 				const positions = command.positions;
 				const uvs = command.uvs;
 				const indices = command.indices;
@@ -204,6 +212,7 @@ function create43Renderer(spine, context) {
 			}
 		} finally {
 			context.globalAlpha = 1;
+			context.globalCompositeOperation = composite;
 		}
 	};
 	base.clipper = core.clipping;
@@ -211,7 +220,7 @@ function create43Renderer(spine, context) {
 }
 
 function createRenderer(spine, context, runtimeDir) {
-	const renderer = runtimeDir === '3.4' ? create34Renderer(spine, context) : runtimeDir === '4.3'
+	const renderer = (runtimeDir === '3.4' || runtimeDir === '3.5') ? create34Renderer(spine, context) : runtimeDir === '4.3'
 		? create43Renderer(spine, context)
 		: createLegacyRenderer(spine, context);
 	// Explicitly disable debug drawing in every supported runtime.