From 199a77549fedc023b9675c6394e7eb237d8b8644 Mon Sep 17 00:00:00 2001
From: zhouxinyu <zhouxinyu12138@gmail.com>
Date: Mon, 23 Dec 2024 15:57:26 +0800
Subject: [PATCH] fix: fix issue with image background

---
 .../feat-background_2024-12-23-07-57.json     | 10 +++++++
 .../feat-background_2024-12-23-07-57.json     | 10 +++++++
 packages/vstory-core/src/core/canvas.ts       | 30 +++++++++++++------
 3 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 common/changes/@visactor/vstory-core/feat-background_2024-12-23-07-57.json
 create mode 100644 common/changes/@visactor/vstory/feat-background_2024-12-23-07-57.json

diff --git a/common/changes/@visactor/vstory-core/feat-background_2024-12-23-07-57.json b/common/changes/@visactor/vstory-core/feat-background_2024-12-23-07-57.json
new file mode 100644
index 00000000..ad5f45f6
--- /dev/null
+++ b/common/changes/@visactor/vstory-core/feat-background_2024-12-23-07-57.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vstory-core",
+      "comment": "fix: fix issue with image background",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vstory-core"
+}
\ No newline at end of file
diff --git a/common/changes/@visactor/vstory/feat-background_2024-12-23-07-57.json b/common/changes/@visactor/vstory/feat-background_2024-12-23-07-57.json
new file mode 100644
index 00000000..85cb32a6
--- /dev/null
+++ b/common/changes/@visactor/vstory/feat-background_2024-12-23-07-57.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vstory",
+      "comment": "fix: fix issue with image background",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vstory"
+}
\ No newline at end of file
diff --git a/packages/vstory-core/src/core/canvas.ts b/packages/vstory-core/src/core/canvas.ts
index 9f1f7a6d..6bd89b15 100644
--- a/packages/vstory-core/src/core/canvas.ts
+++ b/packages/vstory-core/src/core/canvas.ts
@@ -51,15 +51,15 @@ export class StoryCanvas implements IStoryCanvas {
       scaleX = 1,
       scaleY = 1
     } = params;
-    this._container && this._initCanvasByContainer(width, height, dpr);
-    params.canvas && this._initCanvasByCanvas(canvas, width ?? 500, height ?? 500, dpr);
+    this._container && this._initCanvasByContainer(width, height, dpr, background);
+    params.canvas && this._initCanvasByCanvas(canvas, width ?? 500, height ?? 500, dpr, background);
 
-    this._stage.background = background;
+    // this._stage.background = background;
     this._stage.defaultLayer.setAttributes({ background: layerBackground });
     this.initScale(width, height, scaleX, scaleY);
   }
 
-  protected _initCanvasByContainer(width: number, height: number, dpr: number) {
+  protected _initCanvasByContainer(width: number, height: number, dpr: number, background: string) {
     const container = this._container;
     if (!container) {
       return;
@@ -69,26 +69,38 @@ export class StoryCanvas implements IStoryCanvas {
     canvas.id = `_visactor_story_canvas_${this._story.id}`;
     this._canvas = canvas as any;
     container.appendChild(canvas);
-    const stage = this._initCanvas(canvas, width ?? container.clientWidth, height ?? container.clientHeight, dpr);
+    const stage = this._initCanvas(
+      canvas,
+      width ?? container.clientWidth,
+      height ?? container.clientHeight,
+      dpr,
+      background
+    );
     // @ts-ignore
     this._stage = stage;
   }
 
-  protected _initCanvasByCanvas(canvas: HTMLCanvasElement, width: number, height: number, dpr: number) {
-    const stage = this._initCanvas(canvas, width, height, dpr);
+  protected _initCanvasByCanvas(
+    canvas: HTMLCanvasElement,
+    width: number,
+    height: number,
+    dpr: number,
+    background: string
+  ) {
+    const stage = this._initCanvas(canvas, width, height, dpr, background);
     this._canvas = canvas as any;
     // @ts-ignore
     this._stage = stage;
   }
 
-  protected _initCanvas(canvas: HTMLCanvasElement, width: number, height: number, dpr: number) {
+  protected _initCanvas(canvas: HTMLCanvasElement, width: number, height: number, dpr: number, background: string) {
     const stage = createStage({
       canvas: canvas,
       width,
       height,
       dpr,
       canvasControled: true,
-
+      background,
       // 得开启自动渲染，否则编辑场景中无法触发视图更新
       autoRender: false,
       disableDirtyBounds: true,