Skip to content

Commit

Permalink
Merge pull request #187 from VisActor/feat/wh-scale
Browse files Browse the repository at this point in the history
feat: enhance scaleXY auto to support resize canvas wh
  • Loading branch information
neuqzxy authored Dec 23, 2024
2 parents ca68c7b + 6868393 commit 772297b
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 25 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vstory-core",
"comment": "feat: enhance scaleXY auto to support resize canvas wh",
"type": "none"
}
],
"packageName": "@visactor/vstory-core"
}
55 changes: 35 additions & 20 deletions packages/vstory-core/src/core/canvas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,20 +43,22 @@ export class StoryCanvas implements IStoryCanvas {

const {
canvas,
width,
height,
width: _w,
height: _h,
background = 'transparent',
layerBackground = 'transparent',
dpr = vglobal.devicePixelRatio,
scaleX = 1,
scaleY = 1
scaleX: _sx = 1,
scaleY: _sy = 1
} = params;
const { scaleX, scaleY, width, height } = this.getScale(_w, _h, _sx, _sy);

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.defaultLayer.setAttributes({ background: layerBackground });
this.initScale(width, height, scaleX, scaleY);
this._stage.defaultLayer.scale(scaleX, scaleY);
}

protected _initCanvasByContainer(width: number, height: number, dpr: number, background: string) {
Expand Down Expand Up @@ -114,27 +116,40 @@ export class StoryCanvas implements IStoryCanvas {
return stage;
}

protected initScale(width: number, height: number, scaleX: number | 'auto', scaleY: number | 'auto') {
protected getScale(
width: number,
height: number,
scaleX: number | 'auto',
scaleY: number | 'auto'
): { scaleX: number; scaleY: number; width: number; height: number } {
// 仅在传入width和height时有效
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)) {
if (!Number.isFinite(width) || !Number.isFinite(height)) {
scaleX = scaleY = 1;
} else {
if (scaleX === 'auto') {
scaleX = scale;
}

if (scaleY === 'auto') {
scaleY = scale;
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;
}
}
width *= scaleX;
height *= scaleY;
}
}
this._stage.defaultLayer.scale(scaleX, scaleY);
return { scaleX, scaleY, width, height };
// this._stage.defaultLayer.scale(scaleX, scaleY);
}

resize(w: number, h: number) {
Expand Down
17 changes: 12 additions & 5 deletions packages/vstory/demo/src/demos/animate/Bounce.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ export const Bounce = () => {
const id = 'Bounce';

useEffect(() => {
const container = document.getElementById(id);
const canvas = document.createElement('canvas');
container?.appendChild(canvas);
// const container = document.getElementById(id);
// const canvas = document.createElement('canvas');
// container?.appendChild(canvas);

const chartSpec = {
type: 'bar',
Expand All @@ -43,7 +43,14 @@ export const Bounce = () => {
yField: 'sales'
};

const story = new Story(null, { canvas, width: 800, height: 500, background: 'pink' });
const story = new Story(null, {
dom: id,
width: 900,
height: 500,
scaleX: 'auto',
scaleY: 'auto',
background: 'pink'
});
const player = new Player(story);
story.init(player);

Expand Down Expand Up @@ -188,5 +195,5 @@ export const Bounce = () => {
};
}, []);

return <div style={{ width: '100%', height: '100%' }} id={id}></div>;
return <div style={{ width: '500px', height: '300px' }} id={id}></div>;
};

0 comments on commit 772297b

Please sign in to comment.