feat: support pass canvas

packages/vstory/src/story/canvas/canvas.ts

@@ -21,38 +21,74 @@ export class StoryCanvas implements IStoryCanvas {
     return this._canvas;
   }
 
-  protected _container: HTMLDivElement;
+  protected _container: HTMLDivElement | null;
   get container() {
     return this._container;
   }
 
-  constructor(story: Story, container: HTMLDivElement) {
+  constructor(
+    story: Story,
+    params: {
+      container?: HTMLDivElement;
+      canvas?: HTMLCanvasElement;
+      width?: number;
+      height?: number;
+    }
+  ) {
     this._story = story;
-    this._container = container;
-    this._initCanvas();
+    this._container = params.container;
+    this._container && this._initCanvasByContainer();
+    params.canvas && this._initCanvasByCanvas(params.canvas, params.width || 500, params.height || 500);
   }
 
-  protected _initCanvas() {
+  resize(w: number, h: number) {
+    if (this._canvas) {
+      this._canvas.width = w * vglobal.devicePixelRatio;
+      this._canvas.height = h * vglobal.devicePixelRatio;
+      this._canvas.style.width = w + 'px';
+      this._canvas.style.height = h + 'px';
+      this._stage.resize(w, h);
+    }
+  }
+
+  protected _initCanvasByContainer() {
     const canvas = document.createElement('canvas');
-    canvas.width = this._container.clientWidth * window.devicePixelRatio;
-    canvas.height = this._container.clientHeight * window.devicePixelRatio;
-    canvas.style.width = this._container.clientWidth + 'px';
-    canvas.style.height = this._container.clientHeight + 'px';
     canvas.style.position = 'absolute';
     canvas.id = `_visactor_story_canvas_${this._story.id}`;
     this._container.appendChild(canvas);
     this._canvas = canvas;
     const stage = createStage({
       canvas: this._canvas,
-      width: this._canvas.clientWidth,
-      height: this._canvas.clientHeight,
+      width: this._container.clientWidth,
+      height: this._container.clientHeight,
+      dpr: vglobal.devicePixelRatio,
+      canvasControled: true,
+      // 得开启自动渲染，否则编辑场景中无法触发视图更新
+      autoRender: true,
+      disableDirtyBounds: true,
+      ticker: new ManualTicker([]),
+      pluginList: ['RichTextEditPlugin'],
+      event: {
+        clickInterval: 300
+      }
+    });
+    // @ts-ignore
+    this._stage = stage;
+  }
+
+  protected _initCanvasByCanvas(canvas: HTMLCanvasElement, width: number, height: number) {
+    this._canvas = canvas;
+    const stage = createStage({
+      canvas: this._canvas,
+      width,
+      height,
       canvasControled: true,
       // 得开启自动渲染，否则编辑场景中无法触发视图更新
       autoRender: true,
       disableDirtyBounds: true,
       ticker: new ManualTicker([]),
       pluginList: ['RichTextEditPlugin'],
-      dpr: window.devicePixelRatio,
+      dpr: vglobal.devicePixelRatio,
       event: {
         clickInterval: 300
       }

packages/vstory/src/story/interface/runtime-interface.ts

@@ -3,7 +3,10 @@ import type { ICharacter, ICharacterSpec } from '../character';
 import type { IPlayer } from '../../player/interface/player';
 
 export interface IStoryInitOption {
-  dom: string | HTMLDivElement; // dom id
+  dom?: string | HTMLDivElement; // dom id
+  canvas?: string | HTMLCanvasElement; // canvas id
+  width?: number;
+  height?: number;
   playerOption?: {
     scaleX?: number;
     scaleY?: number;
@@ -13,6 +16,7 @@ export interface IStoryInitOption {
 export interface IStoryCanvas {
   getStage: () => IStage;
   getCanvas: () => HTMLCanvasElement;
+  resize: (w: number, height: number) => void;
   getEventDetail: (event: StoryEvent) => {
     character: ICharacter;
     characterInfo: undefined;

packages/vstory/src/story/story.ts

@@ -34,12 +34,14 @@ export class Story implements IStory {
     return this._player;
   }
 
-  constructor(spec: IStorySpec, option: IStoryInitOption) {
+  constructor(spec: IStorySpec | null, option: IStoryInitOption) {
     this.id = 'test-mvp_' + Story._id_++;
-    this._canvas = new StoryCanvas(
-      this,
-      isString(option.dom) ? (document.getElementById(option.dom) as HTMLDivElement) : option.dom
-    );
+    this._canvas = new StoryCanvas(this, {
+      container: isString(option.dom) ? (document.getElementById(option.dom) as HTMLDivElement) : option.dom,
+      canvas: isString(option.canvas) ? (document.getElementById(option.canvas) as HTMLCanvasElement) : option.canvas,
+      width: option.width,
+      height: option.height
+    });
     this._player = new Player(this, option.playerOption);
 
     this._characterTree = new CharacterTree(this);