modern-canvas 0.23.7 → 0.23.8

package/dist/index.js

@@ -6697,7 +6697,7 @@ function Oi(e, t, n, r, i = {}) {
 		let t = e;
 		n.fill && (n.fill.color || n.fill.linearGradient || n.fill.image) && (t = Ti(t, a, o, n.fill, i)), n.outline?.width && n.outline.color && (t = Ei(t, a, o, n.outline.width, n.outline.color));
 		let { x: r, y: s } = Di(n.transform);
-		c.save(), n.shadow && (c.shadowColor = n.shadow.color, c.shadowBlur = n.shadow.blur ?? 0, c.shadowOffsetX = n.shadow.offsetX ?? 0, c.shadowOffsetY = n.shadow.offsetY ?? 0), r || s ? c.drawImage(t, r, s, a, o) : (c.globalCompositeOperation = "destination-over", c.drawImage(t, 0, 0, a, o)), c.restore();
+		c.save(), c.globalCompositeOperation = "destination-over", n.shadow && (c.shadowColor = n.shadow.color, c.shadowBlur = n.shadow.blur ?? 0, c.shadowOffsetX = n.shadow.offsetX ?? 0, c.shadowOffsetY = n.shadow.offsetY ?? 0), c.drawImage(t, r, s, a, o), c.restore();
 	}
 	return s;
 }
@@ -6729,14 +6729,27 @@ var ki = class extends J {
 		}
 		let e = await this._resolveSourceCanvas();
 		if (!e) return;
-		let t = e.width, n = e.height, r = Oi(e, this.effects, t, n);
+		let t = e.width, n = e.height, r = await this._resolvePatterns(), i = Oi(e, this.effects, t, n, r);
 		this.texture = new R({
-			source: r,
+			source: i,
 			width: t,
 			height: n,
 			uploadMethodId: "image"
 		});
 	}
+	async _resolvePatterns() {
+		let e = {};
+		for (let t of this.effects ?? []) {
+			let n = t.fill?.image;
+			if (!n || d(n) || e[n]) continue;
+			let r = await $.loadBy(`${n}#mc-foreground-pattern`, async () => {
+				let e = await $.fetchImageBitmap(n), t = this._snapshot(e);
+				return Ne && e instanceof ImageBitmap && e.close(), t;
+			});
+			r && (e[n] = r);
+		}
+		return e;
+	}
 	async _resolveSourceCanvas() {
 		if (this._sourceImage !== this.image && (this._sourceCanvas = void 0, this._sourceImage = this.image), this._sourceCanvas) return this._sourceCanvas;
 		if (d(this.image) || this.image === "viewport") return;

package/dist/scene/2d/element/Element2DForeground.d.ts

@@ -25,6 +25,11 @@ export declare class Element2DForeground extends Element2DFill implements Normal
     loadTexture(): Promise<void>;
     /** 把原图 + effects 烘焙成一张运行时纹理（gif/无 effects 时跳过） */
     protected _applyEffects(): Promise<void>;
+    /**
+     * 预解码 effects 里 fill.image 用到的图案。烘焙是同步的，图案须先就绪；
+     * 按 url 在资源层缓存复用，未提供的图案在烘焙时会被跳过（不重上色）。
+     */
+    protected _resolvePatterns(): Promise<Record<string, HTMLCanvasElement>>;
     /**
      * 取得用于烘焙的 CPU 副本：始终从 image 独立解码一份（createImageBitmap 保证解码
      * 就绪），快照进 canvas，按 url 在资源层缓存复用。不读 `this.texture.source`——见

package/dist/scene/2d/element/bakeImageEffects.d.ts

@@ -5,7 +5,11 @@ type Drawable = CanvasImageSource & {
 };
 /**
  * 把 `原图 + effects` 烘焙到一张运行时 canvas（不持久化、不转存图片）。
- * 每层按顺序：fill 重上色 → outline 描边 → 按 transform 位移 / shadow 投影合成。
+ * 每层按顺序：fill 重上色 → outline 描边 → 按 transform 位移 / shadow 投影后合成。
+ *
+ * 合成统一用 destination-over：数组按「前 → 后」堆叠（第 0 层在最上，后续依次落到其后），
+ * transform translate 只决定该层落点、不改变堆叠次序。于是「原图层 `{}` 在前 + 位移填充层在后」
+ * 即得到「主图在上、彩色副本作为阴影/重影偏移到背后」——与来源编辑器的图片样式一致。
  *
  * 注意：图案填充（fill.image）需异步预加载，未在 patterns 中提供则跳过该填充。
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.23.7",
+  "version": "0.23.8",
   "packageManager": "pnpm@10.19.0",
   "description": "A JavaScript WebGL rendering engine. only the ESM.",
   "author": "wxm",