mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
fix: @idraw/board scale wrong logic
This commit is contained in:
chenshenhai
parent
2eee76679f
commit
7a0047997b
17 changed files with 225 additions and 402 deletions
BIN
__tests__/snapshot/board/examples/test/scale-004.html.jpg
Normal file
BIN
__tests__/snapshot/board/examples/test/scale-004.html.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
__tests__/snapshot/core/examples/test/scale-001.html.jpg
Normal file
BIN
__tests__/snapshot/core/examples/test/scale-001.html.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
__tests__/snapshot/core/examples/test/scale-002.html.jpg
Normal file
BIN
__tests__/snapshot/core/examples/test/scale-002.html.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
__tests__/snapshot/core/examples/test/scale-003.html.jpg
Normal file
BIN
__tests__/snapshot/core/examples/test/scale-003.html.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
|
|
@ -1,129 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`@idraw/board context 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"dHeight": 1600,
|
||||
"dWidth": 2400,
|
||||
"dx": 0,
|
||||
"dy": 0,
|
||||
"img": <canvas
|
||||
height="1600"
|
||||
width="2400"
|
||||
/>,
|
||||
"sHeight": 1600,
|
||||
"sWidth": 2400,
|
||||
"sx": 0,
|
||||
"sy": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board context 2`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"dHeight": 1600,
|
||||
"dWidth": 2400,
|
||||
"dx": 0,
|
||||
"dy": 0,
|
||||
"img": <canvas
|
||||
height="1600"
|
||||
width="2400"
|
||||
/>,
|
||||
"sHeight": 1600,
|
||||
"sWidth": 2400,
|
||||
"sx": 0,
|
||||
"sy": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`@idraw/board scale 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"dHeight": 1600,
|
||||
"dWidth": 2400,
|
||||
"dx": 600,
|
||||
"dy": 400,
|
||||
"img": <canvas
|
||||
height="1600"
|
||||
width="2400"
|
||||
/>,
|
||||
"sHeight": 1600,
|
||||
"sWidth": 2400,
|
||||
"sx": 0,
|
||||
"sy": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board scale 2`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"dHeight": 1600,
|
||||
"dWidth": 2400,
|
||||
"dx": 600,
|
||||
"dy": 400,
|
||||
"img": <canvas
|
||||
height="1600"
|
||||
width="2400"
|
||||
/>,
|
||||
"sHeight": 1600,
|
||||
"sWidth": 2400,
|
||||
"sx": 0,
|
||||
"sy": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`@idraw/board scroll 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"dHeight": 1600,
|
||||
"dWidth": 2400,
|
||||
"dx": -2400,
|
||||
"dy": -1600,
|
||||
"img": <canvas
|
||||
height="1600"
|
||||
width="2400"
|
||||
/>,
|
||||
"sHeight": 1600,
|
||||
"sWidth": 2400,
|
||||
"sx": 0,
|
||||
"sy": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board scroll 2`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "clearRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"dHeight": 1600,
|
||||
"dWidth": 2400,
|
||||
"dx": -2400,
|
||||
"dy": -1600,
|
||||
"img": <canvas
|
||||
height="1600"
|
||||
width="2400"
|
||||
/>,
|
||||
"sHeight": 1600,
|
||||
"sWidth": 2400,
|
||||
"sx": 0,
|
||||
"sy": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
|
@ -10,8 +10,8 @@ describe('@idraw/board', () => {
|
|||
const opts = {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 900,
|
||||
devicePixelRatio: 4
|
||||
}
|
||||
const mount = document.querySelector('#mount') as HTMLDivElement;
|
||||
|
|
|
|||
|
|
@ -160,23 +160,29 @@ class Board {
|
|||
} = this._opts;
|
||||
|
||||
// init scroll
|
||||
if (contextWidth * scaleRatio <= width && contextHeight * scaleRatio <= height) {
|
||||
if (contextWidth * scaleRatio <= width) {
|
||||
// make context center
|
||||
this._ctx.setTransform({
|
||||
scrollX: (width - contextWidth * scaleRatio) / 2,
|
||||
})
|
||||
}
|
||||
|
||||
if (contextHeight * scaleRatio <= height) {
|
||||
// make context center
|
||||
this._ctx.setTransform({
|
||||
scrollY: (height - contextHeight * scaleRatio) / 2,
|
||||
})
|
||||
} else {
|
||||
if (contextWidth * scaleRatio >= width && this._ctx.getTransform().scrollX > 0) {
|
||||
this._ctx.setTransform({
|
||||
scrollX: 0,
|
||||
})
|
||||
}
|
||||
if (contextHeight * scaleRatio >= height && this._ctx.getTransform().scrollY > 0) {
|
||||
this._ctx.setTransform({
|
||||
scrollY: 0,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (contextWidth * scaleRatio >= width && this._ctx.getTransform().scrollX > 0) {
|
||||
this._ctx.setTransform({
|
||||
scrollX: 0,
|
||||
})
|
||||
}
|
||||
if (contextHeight * scaleRatio >= height && this._ctx.getTransform().scrollY > 0) {
|
||||
this._ctx.setTransform({
|
||||
scrollY: 0,
|
||||
})
|
||||
}
|
||||
|
||||
const { scrollX, scrollY } = this._ctx.getTransform();
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { TypeContext } from '@idraw/types';
|
|||
type Options = {
|
||||
width: number;
|
||||
height: number;
|
||||
contextWidth: number;
|
||||
contextHeight: number;
|
||||
devicePixelRatio: number;
|
||||
}
|
||||
|
||||
|
|
@ -49,6 +51,8 @@ class Context implements TypeContext {
|
|||
return {
|
||||
width: this._opts.width,
|
||||
height: this._opts.height,
|
||||
contextWidth: this._opts.contextWidth,
|
||||
contextHeight: this._opts.contextHeight,
|
||||
devicePixelRatio: this._opts.devicePixelRatio,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
63
packages/core/examples/test/data.js
Normal file
63
packages/core/examples/test/data.js
Normal file
File diff suppressed because one or more lines are too long
43
packages/core/examples/test/scale-001.html
Normal file
43
packages/core/examples/test/scale-001.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
html,body { margin: 0; padding: 0; }
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(#aaa 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaa 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script type="module">
|
||||
import { getData } from './data.js';
|
||||
const { Core } = window.iDraw;
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 900,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
core.initData(data);
|
||||
const result = core.scale(0.5);
|
||||
console.log('scale: ', result);
|
||||
core.draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
packages/core/examples/test/scale-002.html
Normal file
45
packages/core/examples/test/scale-002.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
html,body { margin: 0; padding: 0; }
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(#aaa 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaa 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script type="module">
|
||||
import { getData } from './data.js';
|
||||
const { Core } = window.iDraw;
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1200,
|
||||
contextHeight: 600,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
core.initData(data);
|
||||
core.scrollX(-600);
|
||||
core.scrollY(-400);
|
||||
const result = core.scale(0.5);
|
||||
console.log('scale: ', result);
|
||||
core.draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
43
packages/core/examples/test/scale-003.html
Normal file
43
packages/core/examples/test/scale-003.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<style>
|
||||
html,body { margin: 0; padding: 0; }
|
||||
#mount canvas {
|
||||
border-right: 1px solid #aaaaaa40;
|
||||
border-bottom: 1px solid #aaaaaa40;
|
||||
background-image:
|
||||
linear-gradient(#aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
|
||||
linear-gradient(#aaa 1px, transparent 0),
|
||||
linear-gradient(90deg, #aaa 1px, transparent 0);
|
||||
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="mount"></div>
|
||||
|
||||
|
||||
<script src="./../../dist/index.global.js"></script>
|
||||
<script type="module">
|
||||
import { getData } from './data.js';
|
||||
const { Core } = window.iDraw;
|
||||
const data = getData();
|
||||
const core = new Core( document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 600,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
core.initData(data);
|
||||
core.scrollX(400);
|
||||
core.scrollY(400);
|
||||
const result = core.scale(0.8);
|
||||
core.draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -16,7 +16,7 @@ export function clearContext(ctx: TypeContext) {
|
|||
export function drawBgColor(ctx: TypeContext, color: string) {
|
||||
const size = ctx.getSize();
|
||||
ctx.setFillStyle(color);
|
||||
ctx.fillRect(0, 0, size.width, size.height);
|
||||
ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
|
||||
}
|
||||
|
||||
export function drawBox(
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ interface TypeContext {
|
|||
getSize(): {
|
||||
width: number;
|
||||
height: number;
|
||||
contextWidth: number;
|
||||
contextHeight: number;
|
||||
devicePixelRatio: number;
|
||||
};
|
||||
calcDeviceNum(num: number): number;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,14 @@ const pageList = [
|
|||
{ path: 'board/examples/test/scale-001.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'board/examples/test/scale-002.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'board/examples/test/scale-003.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'board/examples/test/scale-004.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'core/examples/features/rect.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'core/examples/features/text.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'core/examples/features/svg.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'core/examples/features/image.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'core/examples/test/scale-001.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'core/examples/test/scale-002.html', w: 600, h: 400, delay: 1000 },
|
||||
{ path: 'core/examples/test/scale-003.html', w: 600, h: 400, delay: 1000 },
|
||||
// { path: 'core/examples/test.html', w: 600, h: 600, delay: 8000 },
|
||||
]
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue