diff --git a/packages/vstory/demo/src/demos/Playground.tsx b/packages/vstory/demo/src/demos/Playground.tsx index c1cc4b07..e8effbff 100644 --- a/packages/vstory/demo/src/demos/Playground.tsx +++ b/packages/vstory/demo/src/demos/Playground.tsx @@ -1329,7 +1329,7 @@ export function Player(props: IPlayerPropsType) { } } console.log(json); - const story = new Story(json, { dom: 'abc' }); + const story = new Story(json, { dom: 'abc', playerOption: { scaleX: 0.5, scaleY: 0.5 } }); storyRef.current = story; story.play(); }, [props.code]); diff --git a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx index 36678a5e..f2adabc1 100644 --- a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx @@ -61,7 +61,7 @@ export const VChartSiteDemo = () => { ] }; console.log('dsl', tempSpec); - const story = new Story(tempSpec, { dom: id }); + const story = new Story(tempSpec, { dom: id, playerOption: { scaleX: 0.5, scaleY: 0.5 } }); window.story = story; story.play(); const btn1 = document.createElement('button'); diff --git a/packages/vstory/src/story/interface/runtime-interface.ts b/packages/vstory/src/story/interface/runtime-interface.ts index 72d49957..dcd84edb 100644 --- a/packages/vstory/src/story/interface/runtime-interface.ts +++ b/packages/vstory/src/story/interface/runtime-interface.ts @@ -2,6 +2,10 @@ import type { IGraphic } from '@visactor/vrender'; export interface IStoryInitOption { dom: string | HTMLDivElement; // dom id + playerOption?: { + scaleX?: number; + scaleY?: number; + }; } export interface IStory { diff --git a/packages/vstory/src/story/player/index.ts b/packages/vstory/src/story/player/index.ts index 97f730e5..680f6ac7 100644 --- a/packages/vstory/src/story/player/index.ts +++ b/packages/vstory/src/story/player/index.ts @@ -48,11 +48,15 @@ export class Player implements IPlayer { // protected _encoder: Encoder; protected _actionProcessor: ActionProcessor; - constructor(c: StoryCanvas) { + constructor(c: StoryCanvas, options?: { scaleX?: number; scaleY?: number }) { this._canvas = c; this._acts = []; this._ticker = new Ticker(); this._currTime = 0; + c.getStage().defaultLayer.setAttributes({ + scaleX: options?.scaleX ?? 1, + scaleY: options?.scaleY ?? 1 + }); // this._encoder = new Encoder(); this._actionProcessor = new ActionProcessor(processorMap); } diff --git a/packages/vstory/src/story/story.ts b/packages/vstory/src/story/story.ts index 39e76f3e..b1c92938 100644 --- a/packages/vstory/src/story/story.ts +++ b/packages/vstory/src/story/story.ts @@ -31,7 +31,7 @@ export class Story implements IStory { this, isString(option.dom) ? (document.getElementById(option.dom) as HTMLDivElement) : option.dom ); - this._player = new Player(this._canvas); + this._player = new Player(this._canvas, option.playerOption); if (spec) { this.load(spec);