From aff43289d8234a24fc3ba9f0ac2b9c23754000f6 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 18 Dec 2024 15:43:22 +0800 Subject: [PATCH 1/2] feat: support auto scaleX/scaleY --- .../en/infographic/bar-chart-leftRight.md | 6 ++-- .../infographic/bar-chart-regional-sales.md | 2 +- .../examples/en/infographic/bar-hiv-chart.md | 6 ++-- .../infographic/bar-work-in-same-industry.md | 6 ++-- .../en/infographic/big-data-wordcloud.md | 6 ++-- .../examples/en/infographic/cat-stroke.md | 6 ++-- .../en/infographic/client-breakdown.md | 6 ++-- .../en/infographic/line-chart-leftRight.md | 6 ++-- .../en/infographic/marking-wordcloud.md | 5 ++- .../en/infographic/pie-chart-leftRight.md | 6 ++-- .../infographic/pie-chart-transportation.md | 2 +- .../examples/en/infographic/project-goal.md | 7 +++-- .../en/infographic/scatter-chart-matrix.md | 6 ++-- .../en/infographic/scatter-income-obesity.md | 6 ++-- .../infographic/scatter-suicide-rate-age.md | 6 ++-- .../examples/en/infographic/social-media.md | 6 ++-- .../source-of-new-contacts-area-chart.md | 5 ++- .../en/infographic/sprint-burndown.md | 6 ++-- .../en/infographic/unit-infographic.md | 2 +- .../examples/en/infographic/usa-cancer-map.md | 6 ++-- .../examples/en/infographic/venn-chart.md | 6 ++-- .../zh/infographic/bar-chart-leftRight.md | 6 ++-- .../infographic/bar-chart-regional-sales.md | 2 +- .../examples/zh/infographic/bar-hiv-chart.md | 6 ++-- .../infographic/bar-work-in-same-industry.md | 6 ++-- .../zh/infographic/big-data-wordcloud.md | 7 +++-- .../examples/zh/infographic/cat-stroke.md | 6 ++-- .../zh/infographic/client-breakdown.md | 6 ++-- .../zh/infographic/line-chart-leftRight.md | 6 ++-- .../zh/infographic/marking-wordcloud.md | 5 ++- .../zh/infographic/pie-chart-leftRight.md | 6 ++-- .../infographic/pie-chart-transportation.md | 2 +- .../examples/zh/infographic/project-goal.md | 8 ++--- .../zh/infographic/scatter-chart-matrix.md | 6 ++-- .../zh/infographic/scatter-income-obesity.md | 6 ++-- .../infographic/scatter-suicide-rate-age.md | 6 ++-- .../examples/zh/infographic/social-media.md | 6 ++-- .../source-of-new-contacts-area-chart.md | 5 ++- .../zh/infographic/sprint-burndown.md | 6 ++-- .../zh/infographic/unit-infographic.md | 2 +- .../examples/zh/infographic/usa-cancer-map.md | 6 ++-- .../examples/zh/infographic/venn-chart.md | 6 ++-- packages/vstory-core/src/core/canvas.ts | 31 ++++++++++++++++--- packages/vstory-core/src/core/story.ts | 10 +++--- .../demo/src/demos/infographic/bar-hiv.tsx | 2 +- .../infographic/bar-work-in-same-industry.tsx | 8 ++++- .../demos/infographic/big-data-wordcloud.tsx | 8 ++++- .../demo/src/demos/infographic/cancer-usa.tsx | 8 ++++- .../demo/src/demos/infographic/dapanji.tsx | 9 +++++- .../src/demos/infographic/famous-travel.tsx | 8 ++++- .../src/demos/infographic/infographic.tsx | 2 +- .../demo/src/demos/infographic/insta.tsx | 8 ++++- .../demos/infographic/marking-wordcloud.tsx | 8 ++++- .../src/demos/infographic/project-goal.tsx | 8 ++++- .../src/demos/infographic/ready-to-eat.tsx | 2 +- .../source-of-new-contacts-area-chart.tsx | 2 +- 56 files changed, 244 insertions(+), 98 deletions(-) diff --git a/docs/assets/examples/en/infographic/bar-chart-leftRight.md b/docs/assets/examples/en/infographic/bar-chart-leftRight.md index 11f0e5ad..fdbbab74 100644 --- a/docs/assets/examples/en/infographic/bar-chart-leftRight.md +++ b/docs/assets/examples/en/infographic/bar-chart-leftRight.md @@ -173,8 +173,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/bar-chart-regional-sales.md b/docs/assets/examples/en/infographic/bar-chart-regional-sales.md index 6738ab8c..826525f2 100644 --- a/docs/assets/examples/en/infographic/bar-chart-regional-sales.md +++ b/docs/assets/examples/en/infographic/bar-chart-regional-sales.md @@ -186,7 +186,7 @@ async function loadDSL() { }; } -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1280, height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/bar-hiv-chart.md b/docs/assets/examples/en/infographic/bar-hiv-chart.md index aa87d109..0e8a947e 100644 --- a/docs/assets/examples/en/infographic/bar-hiv-chart.md +++ b/docs/assets/examples/en/infographic/bar-hiv-chart.md @@ -571,8 +571,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1056, + height: 814 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/bar-work-in-same-industry.md b/docs/assets/examples/en/infographic/bar-work-in-same-industry.md index 02eb1106..f652ba80 100644 --- a/docs/assets/examples/en/infographic/bar-work-in-same-industry.md +++ b/docs/assets/examples/en/infographic/bar-work-in-same-industry.md @@ -462,8 +462,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 816, + height: 816 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/big-data-wordcloud.md b/docs/assets/examples/en/infographic/big-data-wordcloud.md index e590fa64..8c66b89f 100644 --- a/docs/assets/examples/en/infographic/big-data-wordcloud.md +++ b/docs/assets/examples/en/infographic/big-data-wordcloud.md @@ -1243,8 +1243,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', - scaleX: 0.5, - scaleY: 0.5 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/cat-stroke.md b/docs/assets/examples/en/infographic/cat-stroke.md index 70721c46..e43ac5b2 100644 --- a/docs/assets/examples/en/infographic/cat-stroke.md +++ b/docs/assets/examples/en/infographic/cat-stroke.md @@ -234,8 +234,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 760, + height: 760 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/client-breakdown.md b/docs/assets/examples/en/infographic/client-breakdown.md index a96f8173..0956614e 100644 --- a/docs/assets/examples/en/infographic/client-breakdown.md +++ b/docs/assets/examples/en/infographic/client-breakdown.md @@ -308,8 +308,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/line-chart-leftRight.md b/docs/assets/examples/en/infographic/line-chart-leftRight.md index 3d1f2797..96e31ef2 100644 --- a/docs/assets/examples/en/infographic/line-chart-leftRight.md +++ b/docs/assets/examples/en/infographic/line-chart-leftRight.md @@ -266,8 +266,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/marking-wordcloud.md b/docs/assets/examples/en/infographic/marking-wordcloud.md index bd0039bd..b0a5e088 100644 --- a/docs/assets/examples/en/infographic/marking-wordcloud.md +++ b/docs/assets/examples/en/infographic/marking-wordcloud.md @@ -358,7 +358,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - width: 1280, height: 720 + width: 1280, + height: 720, + scaleX: 'auto', + scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/pie-chart-leftRight.md b/docs/assets/examples/en/infographic/pie-chart-leftRight.md index 869a4bff..bb68266a 100644 --- a/docs/assets/examples/en/infographic/pie-chart-leftRight.md +++ b/docs/assets/examples/en/infographic/pie-chart-leftRight.md @@ -207,8 +207,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/pie-chart-transportation.md b/docs/assets/examples/en/infographic/pie-chart-transportation.md index 9e8a30c6..4934cbd1 100644 --- a/docs/assets/examples/en/infographic/pie-chart-transportation.md +++ b/docs/assets/examples/en/infographic/pie-chart-transportation.md @@ -238,7 +238,7 @@ async function loadDSL() { }; } -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1280, height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/project-goal.md b/docs/assets/examples/en/infographic/project-goal.md index ebb9b491..3abba4c7 100644 --- a/docs/assets/examples/en/infographic/project-goal.md +++ b/docs/assets/examples/en/infographic/project-goal.md @@ -443,9 +443,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - background: '#ebecf0', - scaleX: 0.5, - scaleY: 0.5 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/scatter-chart-matrix.md b/docs/assets/examples/en/infographic/scatter-chart-matrix.md index 968842ff..ad37beb1 100644 --- a/docs/assets/examples/en/infographic/scatter-chart-matrix.md +++ b/docs/assets/examples/en/infographic/scatter-chart-matrix.md @@ -280,8 +280,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 780 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/scatter-income-obesity.md b/docs/assets/examples/en/infographic/scatter-income-obesity.md index 18ddc9f9..60f8741d 100644 --- a/docs/assets/examples/en/infographic/scatter-income-obesity.md +++ b/docs/assets/examples/en/infographic/scatter-income-obesity.md @@ -413,8 +413,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/scatter-suicide-rate-age.md b/docs/assets/examples/en/infographic/scatter-suicide-rate-age.md index a99994a9..ca777725 100644 --- a/docs/assets/examples/en/infographic/scatter-suicide-rate-age.md +++ b/docs/assets/examples/en/infographic/scatter-suicide-rate-age.md @@ -795,8 +795,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/social-media.md b/docs/assets/examples/en/infographic/social-media.md index 6ca8f384..0b294592 100644 --- a/docs/assets/examples/en/infographic/social-media.md +++ b/docs/assets/examples/en/infographic/social-media.md @@ -220,8 +220,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 800, + height: 750 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/source-of-new-contacts-area-chart.md b/docs/assets/examples/en/infographic/source-of-new-contacts-area-chart.md index 08a2de70..0948a6b7 100644 --- a/docs/assets/examples/en/infographic/source-of-new-contacts-area-chart.md +++ b/docs/assets/examples/en/infographic/source-of-new-contacts-area-chart.md @@ -360,7 +360,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - width: 1280, height: 720 + width: 1280, + height: 720, + scaleX: 'auto', + scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/sprint-burndown.md b/docs/assets/examples/en/infographic/sprint-burndown.md index a27ae76a..13600f2b 100644 --- a/docs/assets/examples/en/infographic/sprint-burndown.md +++ b/docs/assets/examples/en/infographic/sprint-burndown.md @@ -296,8 +296,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/unit-infographic.md b/docs/assets/examples/en/infographic/unit-infographic.md index cc54e07c..f421be03 100644 --- a/docs/assets/examples/en/infographic/unit-infographic.md +++ b/docs/assets/examples/en/infographic/unit-infographic.md @@ -374,7 +374,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1920, height: 1080 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/usa-cancer-map.md b/docs/assets/examples/en/infographic/usa-cancer-map.md index 32537dad..a901469e 100644 --- a/docs/assets/examples/en/infographic/usa-cancer-map.md +++ b/docs/assets/examples/en/infographic/usa-cancer-map.md @@ -200,8 +200,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/infographic/venn-chart.md b/docs/assets/examples/en/infographic/venn-chart.md index 9e738e53..1cf7947a 100644 --- a/docs/assets/examples/en/infographic/venn-chart.md +++ b/docs/assets/examples/en/infographic/venn-chart.md @@ -358,8 +358,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/bar-chart-leftRight.md b/docs/assets/examples/zh/infographic/bar-chart-leftRight.md index 9ea64a28..ed47eead 100644 --- a/docs/assets/examples/zh/infographic/bar-chart-leftRight.md +++ b/docs/assets/examples/zh/infographic/bar-chart-leftRight.md @@ -173,8 +173,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md b/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md index c33c49da..ed4be6e9 100644 --- a/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md +++ b/docs/assets/examples/zh/infographic/bar-chart-regional-sales.md @@ -187,7 +187,7 @@ async function loadDSL() { }; } -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1280, height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/bar-hiv-chart.md b/docs/assets/examples/zh/infographic/bar-hiv-chart.md index 25ed30b2..6b2a5866 100644 --- a/docs/assets/examples/zh/infographic/bar-hiv-chart.md +++ b/docs/assets/examples/zh/infographic/bar-hiv-chart.md @@ -572,8 +572,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1056, + height: 814 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/bar-work-in-same-industry.md b/docs/assets/examples/zh/infographic/bar-work-in-same-industry.md index c1ecc8c0..1c668778 100644 --- a/docs/assets/examples/zh/infographic/bar-work-in-same-industry.md +++ b/docs/assets/examples/zh/infographic/bar-work-in-same-industry.md @@ -463,8 +463,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 816, + height: 816 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/big-data-wordcloud.md b/docs/assets/examples/zh/infographic/big-data-wordcloud.md index 494a5bd0..e80e46fa 100644 --- a/docs/assets/examples/zh/infographic/big-data-wordcloud.md +++ b/docs/assets/examples/zh/infographic/big-data-wordcloud.md @@ -1242,9 +1242,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - background: '#ebecf0', - scaleX: 0.5, - scaleY: 0.5 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/cat-stroke.md b/docs/assets/examples/zh/infographic/cat-stroke.md index d9be4a59..6ca790dd 100644 --- a/docs/assets/examples/zh/infographic/cat-stroke.md +++ b/docs/assets/examples/zh/infographic/cat-stroke.md @@ -235,8 +235,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 760, + height: 760 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/client-breakdown.md b/docs/assets/examples/zh/infographic/client-breakdown.md index 9d5ba221..40601366 100644 --- a/docs/assets/examples/zh/infographic/client-breakdown.md +++ b/docs/assets/examples/zh/infographic/client-breakdown.md @@ -308,8 +308,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/line-chart-leftRight.md b/docs/assets/examples/zh/infographic/line-chart-leftRight.md index 850ea063..6140a4cc 100644 --- a/docs/assets/examples/zh/infographic/line-chart-leftRight.md +++ b/docs/assets/examples/zh/infographic/line-chart-leftRight.md @@ -268,8 +268,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/marking-wordcloud.md b/docs/assets/examples/zh/infographic/marking-wordcloud.md index 64bcc3cb..69b4431e 100644 --- a/docs/assets/examples/zh/infographic/marking-wordcloud.md +++ b/docs/assets/examples/zh/infographic/marking-wordcloud.md @@ -359,7 +359,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - width: 1280, height: 720 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/pie-chart-leftRight.md b/docs/assets/examples/zh/infographic/pie-chart-leftRight.md index 0317630d..f57e0a3d 100644 --- a/docs/assets/examples/zh/infographic/pie-chart-leftRight.md +++ b/docs/assets/examples/zh/infographic/pie-chart-leftRight.md @@ -207,8 +207,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/pie-chart-transportation.md b/docs/assets/examples/zh/infographic/pie-chart-transportation.md index 567d26ec..69deaf01 100644 --- a/docs/assets/examples/zh/infographic/pie-chart-transportation.md +++ b/docs/assets/examples/zh/infographic/pie-chart-transportation.md @@ -239,7 +239,7 @@ async function loadDSL() { }; } -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1280, height: 720, scaleX: 0.7, scaleY: 0.7 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1280, height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/project-goal.md b/docs/assets/examples/zh/infographic/project-goal.md index 5311e5e9..e4c989aa 100644 --- a/docs/assets/examples/zh/infographic/project-goal.md +++ b/docs/assets/examples/zh/infographic/project-goal.md @@ -443,13 +443,13 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - background: '#ebecf0', - scaleX: 0.5, - scaleY: 0.5 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); - player.play(-1); window['story'] = story; diff --git a/docs/assets/examples/zh/infographic/scatter-chart-matrix.md b/docs/assets/examples/zh/infographic/scatter-chart-matrix.md index 2bba424d..1060d02c 100644 --- a/docs/assets/examples/zh/infographic/scatter-chart-matrix.md +++ b/docs/assets/examples/zh/infographic/scatter-chart-matrix.md @@ -281,8 +281,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 780 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/scatter-income-obesity.md b/docs/assets/examples/zh/infographic/scatter-income-obesity.md index fbd29e64..a4389413 100644 --- a/docs/assets/examples/zh/infographic/scatter-income-obesity.md +++ b/docs/assets/examples/zh/infographic/scatter-income-obesity.md @@ -415,8 +415,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/scatter-suicide-rate-age.md b/docs/assets/examples/zh/infographic/scatter-suicide-rate-age.md index a61121bd..35edaf20 100644 --- a/docs/assets/examples/zh/infographic/scatter-suicide-rate-age.md +++ b/docs/assets/examples/zh/infographic/scatter-suicide-rate-age.md @@ -795,8 +795,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/social-media.md b/docs/assets/examples/zh/infographic/social-media.md index d3012879..db03346f 100644 --- a/docs/assets/examples/zh/infographic/social-media.md +++ b/docs/assets/examples/zh/infographic/social-media.md @@ -220,8 +220,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 800, + height: 750 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/source-of-new-contacts-area-chart.md b/docs/assets/examples/zh/infographic/source-of-new-contacts-area-chart.md index 89b1046b..68993cd8 100644 --- a/docs/assets/examples/zh/infographic/source-of-new-contacts-area-chart.md +++ b/docs/assets/examples/zh/infographic/source-of-new-contacts-area-chart.md @@ -361,7 +361,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - width: 1280, height: 720 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/sprint-burndown.md b/docs/assets/examples/zh/infographic/sprint-burndown.md index 13b5238b..016c01b0 100644 --- a/docs/assets/examples/zh/infographic/sprint-burndown.md +++ b/docs/assets/examples/zh/infographic/sprint-burndown.md @@ -296,8 +296,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/unit-infographic.md b/docs/assets/examples/zh/infographic/unit-infographic.md index f798bec1..1a75b30c 100644 --- a/docs/assets/examples/zh/infographic/unit-infographic.md +++ b/docs/assets/examples/zh/infographic/unit-infographic.md @@ -374,7 +374,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, scaleX: 'auto', scaleY: 'auto', width: 1920, height: 1080 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/usa-cancer-map.md b/docs/assets/examples/zh/infographic/usa-cancer-map.md index 622f4d7e..4749cba3 100644 --- a/docs/assets/examples/zh/infographic/usa-cancer-map.md +++ b/docs/assets/examples/zh/infographic/usa-cancer-map.md @@ -200,8 +200,10 @@ const dsl = { const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/infographic/venn-chart.md b/docs/assets/examples/zh/infographic/venn-chart.md index 6bfc7a85..e1db02c1 100644 --- a/docs/assets/examples/zh/infographic/venn-chart.md +++ b/docs/assets/examples/zh/infographic/venn-chart.md @@ -359,8 +359,10 @@ const dsl = { }; const story = new VStory.Story(dsl, { dom: CONTAINER_ID, - scaleX: 0.7, - scaleY: 0.7 + scaleX: 'auto', + scaleY: 'auto', + width: 1280, + height: 720 }); const player = new VStory.Player(story); story.init(player); diff --git a/packages/vstory-core/src/core/canvas.ts b/packages/vstory-core/src/core/canvas.ts index d896482c..9f1f7a6d 100644 --- a/packages/vstory-core/src/core/canvas.ts +++ b/packages/vstory-core/src/core/canvas.ts @@ -4,6 +4,7 @@ import type { IStoryCanvas } from '../interface/canvas'; import type { IStory } from '../interface/story'; import type { IStoryEvent } from '../interface/event'; import type { ICharacter } from '../interface/character'; +import { isValidNumber } from '@visactor/vutils'; export class StoryCanvas implements IStoryCanvas { protected _story: IStory; @@ -33,8 +34,8 @@ export class StoryCanvas implements IStoryCanvas { dpr?: number; background: string; layerBackground: string; - scaleX?: number; - scaleY?: number; + scaleX?: number | 'auto'; + scaleY?: number | 'auto'; } ) { this._story = story; @@ -55,8 +56,7 @@ export class StoryCanvas implements IStoryCanvas { this._stage.background = background; this._stage.defaultLayer.setAttributes({ background: layerBackground }); - - this._stage.defaultLayer.scale(scaleX, scaleY); + this.initScale(width, height, scaleX, scaleY); } protected _initCanvasByContainer(width: number, height: number, dpr: number) { @@ -102,6 +102,29 @@ export class StoryCanvas implements IStoryCanvas { return stage; } + protected initScale(width: number, height: number, scaleX: number | 'auto', scaleY: number | 'auto') { + if (scaleX === 'auto' || scaleY === 'auto') { + const clipWidth = this._container ? this._container.clientWidth : this._canvas.width / this.getDpr(); + const clipHeight = this._container ? this._container.clientHeight : this._canvas.height / this.getDpr(); + + const clipAspectRatio = clipWidth / clipHeight; + const contentAspectRatio = width / height; + const scale = clipAspectRatio > contentAspectRatio ? clipHeight / height : clipWidth / width; + if (!isValidNumber(scale)) { + scaleX = scaleY = 1; + } else { + if (scaleX === 'auto') { + scaleX = scale; + } + + if (scaleY === 'auto') { + scaleY = scale; + } + } + } + this._stage.defaultLayer.scale(scaleX, scaleY); + } + resize(w: number, h: number) { this._stage.resize(w, h, true); } diff --git a/packages/vstory-core/src/core/story.ts b/packages/vstory-core/src/core/story.ts index 38ac2d6c..d78d68ff 100644 --- a/packages/vstory-core/src/core/story.ts +++ b/packages/vstory-core/src/core/story.ts @@ -20,8 +20,8 @@ export interface IStoryInitOption { layerBackground?: string; dpr?: number; // 对画面的缩放 - scaleX?: number; - scaleY?: number; + scaleX?: number | 'auto'; + scaleY?: number | 'auto'; } export class Story implements IStory { @@ -50,7 +50,8 @@ export class Story implements IStory { layerBackground = 'transparent', dpr = vglobal.devicePixelRatio, scaleX = 1, - scaleY = 1 + scaleY = 1, + aspectRatio } = option; if (!(dom || canvas)) { throw new Error('dom or canvas is required'); @@ -64,7 +65,8 @@ export class Story implements IStory { dpr, layerBackground, scaleX, - scaleY + scaleY, + aspectRatio }); this._characterTree = new CharacterTree(this); this._dsl = dsl; diff --git a/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx b/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx index 088e9fa8..d4aa89d6 100644 --- a/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx +++ b/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx @@ -418,7 +418,7 @@ export const BarHIV = () => { console.log(dsl); - const story = new Story(dsl, { canvas, width: 1056, height: 814, background: 'pink' }); + const story = new Story(dsl, { canvas, scaleX: 'auto', scaleY: 'auto', width: 1056, height: 814 }); const player = new Player(story); story.init(player); player.play(-1); diff --git a/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx b/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx index cc77354e..31a57561 100644 --- a/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx +++ b/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx @@ -403,7 +403,13 @@ export const BarWorkingInSameIndustry = () => { console.log(dsl); - const story = new Story(dsl, { canvas, width: 816, height: 816, background: 'white' }); + const story = new Story(dsl, { + canvas, + width: 816, + height: 816, + scaleX: 'auto', + scaleY: 'auto' + }); const player = new Player(story); story.init(player); player.play(-1); diff --git a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx index 5765a240..c1d62893 100644 --- a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx +++ b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx @@ -1237,7 +1237,13 @@ export const BigDataWordCloud = () => { ] }; - const story = new Story(dsl, { canvas, width: 1280, height: 720, background: 'pink' }); + const story = new Story(dsl, { + canvas, + width: 1280, + height: 720, + scaleX: 'auto', + scaleY: 'auto' + }); const player = new Player(story); story.init(player); player.play(-1); diff --git a/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx b/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx index 5bd2c20a..4f86125f 100644 --- a/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx +++ b/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx @@ -187,7 +187,13 @@ export const CancerUSA = () => { ] }; - const story = new Story(dsl, { canvas, width: 1280, height: 720, background: 'white' }); + const story = new Story(dsl, { + canvas, + width: 1280, + height: 720, + scaleX: 'auto', + scaleY: 'auto' + }); const player = new Player(story); story.init(player); diff --git a/packages/vstory/demo/src/demos/infographic/dapanji.tsx b/packages/vstory/demo/src/demos/infographic/dapanji.tsx index 829463da..0fa298ee 100644 --- a/packages/vstory/demo/src/demos/infographic/dapanji.tsx +++ b/packages/vstory/demo/src/demos/infographic/dapanji.tsx @@ -3477,7 +3477,14 @@ export const Dapanji = () => { ] }; - const story = new Story(dsl, { canvas, width: 1280, height: 720, background: 'pink' }); + const story = new Story(dsl, { + canvas, + width: 1280, + height: 720, + scaleX: 'auto', + scaleY: 'auto', + background: 'pink' + }); const player = new Player(story); story.init(player); player.play(-1); diff --git a/packages/vstory/demo/src/demos/infographic/famous-travel.tsx b/packages/vstory/demo/src/demos/infographic/famous-travel.tsx index 93746b71..9790ff16 100644 --- a/packages/vstory/demo/src/demos/infographic/famous-travel.tsx +++ b/packages/vstory/demo/src/demos/infographic/famous-travel.tsx @@ -198,7 +198,13 @@ export const FamousTravel = () => { ] }; - const story = new Story(dsl, { canvas, width: 1280, height: 720, background: '#fff' }); + const story = new Story(dsl, { + canvas, + width: 1280, + height: 720, + scaleX: 'auto', + scaleY: 'auto' + }); const player = new Player(story); story.init(player); player.play(-1); diff --git a/packages/vstory/demo/src/demos/infographic/infographic.tsx b/packages/vstory/demo/src/demos/infographic/infographic.tsx index 21ff4bb4..bd4c4863 100644 --- a/packages/vstory/demo/src/demos/infographic/infographic.tsx +++ b/packages/vstory/demo/src/demos/infographic/infographic.tsx @@ -235,7 +235,7 @@ export const Infographic = () => { ] }; - const story = new Story(dsl, { canvas, width: 1280, height: 720, background: 'pink' }); + const story = new Story(dsl, { canvas, width: 1280, height: 720, scaleX: 'auto', scaleY: 'auto' }); const player = new Player(story); story.init(player); player.play(-1); diff --git a/packages/vstory/demo/src/demos/infographic/insta.tsx b/packages/vstory/demo/src/demos/infographic/insta.tsx index a787623c..ada11983 100644 --- a/packages/vstory/demo/src/demos/infographic/insta.tsx +++ b/packages/vstory/demo/src/demos/infographic/insta.tsx @@ -204,7 +204,13 @@ export const Insta = () => { ] }; - const story = new Story(dsl, { canvas, width: 750, height: 800, background: 'white' }); + const story = new Story(dsl, { + canvas, + width: 750, + height: 800, + scaleX: 'auto', + scaleY: 'auto' + }); const player = new Player(story); story.init(player); diff --git a/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx index 2ffd1e34..0303d633 100644 --- a/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx +++ b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx @@ -354,7 +354,13 @@ export const MarketingWordcloud = () => { ] }; - const story = new Story(dsl, { canvas, width: 1280, height: 720, background: '#FFF' }); + const story = new Story(dsl, { + canvas, + width: 1280, + height: 720, + scaleX: 'auto', + scaleY: 'auto' + }); const player = new Player(story); story.init(player); player.play(-1); diff --git a/packages/vstory/demo/src/demos/infographic/project-goal.tsx b/packages/vstory/demo/src/demos/infographic/project-goal.tsx index 883d6bfb..fa3dabb7 100644 --- a/packages/vstory/demo/src/demos/infographic/project-goal.tsx +++ b/packages/vstory/demo/src/demos/infographic/project-goal.tsx @@ -450,7 +450,13 @@ export const ProjectGoal = () => { ] }; - const story = new Story(dsl, { canvas, width: 1280, height: 720, background: 'pink' }); + const story = new Story(dsl, { + canvas, + width: 1280, + height: 720, + scaleX: 'auto', + scaleY: 'auto' + }); const player = new Player(story); story.init(player); player.play(-1); diff --git a/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx b/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx index 214e9089..75965eed 100644 --- a/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx +++ b/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx @@ -146,7 +146,7 @@ export const ReadyToEat = () => { ] }; - const story = new Story(dsl, { canvas, width: 1280, height: 720, background: '#DDE6E8' }); + const story = new Story(dsl, { canvas, width: 1280, height: 720, scaleX: 'auto', scaleY: 'auto' }); const player = new Player(story); story.init(player); player.play(-1); diff --git a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx index ce400d8e..aba0768f 100644 --- a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx +++ b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx @@ -356,7 +356,7 @@ export const AreaChart = () => { ] }; - const story = new Story(dsl, { canvas, width: 1280, height: 720, background: 'pink' }); + const story = new Story(dsl, { canvas, width: 1280, height: 720, scaleX: 'auto', scaleY: 'auto' }); const player = new Player(story); story.init(player); player.play(-1); From 319a2a00129be4b979b0a0e1628b35e79ee927e8 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 18 Dec 2024 15:45:40 +0800 Subject: [PATCH 2/2] docs: add changelog --- .../vstory-core/feat-auto-scale_2024-12-18-07-44.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/@visactor/vstory-core/feat-auto-scale_2024-12-18-07-44.json diff --git a/common/changes/@visactor/vstory-core/feat-auto-scale_2024-12-18-07-44.json b/common/changes/@visactor/vstory-core/feat-auto-scale_2024-12-18-07-44.json new file mode 100644 index 00000000..184f43df --- /dev/null +++ b/common/changes/@visactor/vstory-core/feat-auto-scale_2024-12-18-07-44.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vstory-core", + "comment": "feat: support `auto` for scaleX/scaleY in initParams", + "type": "none" + } + ], + "packageName": "@visactor/vstory-core" +} \ No newline at end of file