modern-canvas 0.23.7 → 0.23.9

package/dist/index.js

@@ -6692,14 +6692,26 @@ function Di(e) {
 	};
 }
 function Oi(e, t, n, r, i = {}) {
-	let a = Math.max(1, Math.round(n)), o = Math.max(1, Math.round(r)), s = S(a, o), c = Ci(s);
-	for (let n of t) {
-		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();
-	}
-	return s;
+	let a = Math.max(1, Math.round(n)), o = Math.max(1, Math.round(r)), s = 0;
+	for (let e of t) {
+		e.outline?.width && e.outline.color && (s = Math.max(s, e.outline.width));
+		let t = Di(e.transform);
+		s = Math.max(s, Math.abs(t.x), Math.abs(t.y));
+	}
+	s = Math.min(Math.ceil(s), Math.floor(Math.min(a, o) * .2));
+	let c = e;
+	if (s > 0) {
+		let t = S(a, o);
+		Ci(t).drawImage(e, s, s, Math.max(1, a - s * 2), Math.max(1, o - s * 2)), c = t;
+	}
+	let l = S(a, o), u = Ci(l);
+	for (let e of t) {
+		let t = c;
+		e.fill && (e.fill.color || e.fill.linearGradient || e.fill.image) && (t = Ti(t, a, o, e.fill, i)), e.outline?.width && e.outline.color && (t = Ei(t, a, o, e.outline.width, e.outline.color));
+		let { x: n, y: r } = Di(e.transform);
+		u.save(), u.globalCompositeOperation = "destination-over", e.shadow && (u.shadowColor = e.shadow.color, u.shadowBlur = e.shadow.blur ?? 0, u.shadowOffsetX = e.shadow.offsetX ?? 0, u.shadowOffsetY = e.shadow.offsetY ?? 0), u.drawImage(t, n, r, a, o), u.restore();
+	}
+	return l;
 }
 //#endregion
 //#region src/scene/2d/element/Element2DForeground.ts
@@ -6729,14 +6741,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.9",
   "packageManager": "pnpm@10.19.0",
   "description": "A JavaScript WebGL rendering engine. only the ESM.",
   "author": "wxm",