Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: @idraw/board scale bug

Browse source
This commit is contained in:
chenshenhai 2021-06-10 09:45:13 +08:00
parent 9ddad42a41
commit cf817edb16
14 changed files with 207 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
__tests__/snapshot/board/examples/test/scale-001.html.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
__tests__/snapshot/board/examples/test/scale-002.html.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
__tests__/snapshot/board/examples/test/scale-003.html.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
__tests__/snapshot/board/examples/test/transform-large.html.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

BIN
__tests__/snapshot/board/examples/test/transform-small.html.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 107 KiB

BIN
__tests__/snapshot/core/examples/features/image.html.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 164 KiB

After

Width:  |  Height:  |  Size: 164 KiB

BIN
__tests__/snapshot/core/examples/features/svg.html.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 154 KiB

After

Width:  |  Height:  |  Size: 154 KiB

59
packages/board/examples/test/scale-001.html Normal file
View file

@ -0,0 +1,59 @@
<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>
const { Board } = window.iDraw;
const mount = document.querySelector('#mount');
const board = new Board(mount, {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
const ctx = board.getContext();
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 600, 400);
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(10, 10, 200, 120);
ctx.setFillStyle('#cccccc');
ctx.fillRect(80, 80, 200, 120);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(160, 160, 200, 120);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
board.scale(0.5);
board.scale(1);
board.draw();
</script>
</body>
</html>

63
packages/board/examples/test/scale-002.html Normal file
View file

@ -0,0 +1,63 @@
<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>
const { Board } = window.iDraw;
const mount = document.querySelector('#mount');
const board = new Board(mount, {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
const ctx = board.getContext();
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 600, 400);
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(10, 10, 200, 120);
ctx.setFillStyle('#cccccc');
ctx.fillRect(80, 80, 200, 120);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(160, 160, 200, 120);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
ctx.setFillStyle('#000');
ctx.fillRect(300 - 10, 200 - 10, 20, 20);
board.scale(2);
board.scrollX(-300);
board.scrollY(-200);
board.draw();
</script>
</body>
</html>

64
packages/board/examples/test/scale-003.html Normal file
View file

@ -0,0 +1,64 @@
<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>
const { Board } = window.iDraw;
const mount = document.querySelector('#mount');
const board = new Board(mount, {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
const ctx = board.getContext();
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 600, 400);
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(10, 10, 200, 120);
ctx.setFillStyle('#cccccc');
ctx.fillRect(80, 80, 200, 120);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(160, 160, 200, 120);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
ctx.setFillStyle('#000');
ctx.fillRect(300 - 10, 200 - 10, 20, 20);
board.scale(2);
board.scrollX(-300);
board.scrollY(-200);
board.scale(1);
board.draw();
</script>
</body>
</html>

3
packages/board/examples/test/transform-large.html
View file

@ -46,6 +46,9 @@
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
ctx.setFillStyle('#000');
ctx.fillRect(300 - 10, 200 - 10, 20, 20);
board.scale(2);
board.scrollX(-600);
board.scrollY(-400);

3
packages/board/examples/test/transform-small.html
View file

@ -46,6 +46,9 @@
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
ctx.setFillStyle('#000');
ctx.fillRect(300 - 10, 200 - 10, 20, 20);
board.scale(0.5);
board.draw();

13
packages/board/src/index.ts
View file

@ -160,12 +160,23 @@ class Board {
} = this._opts;
// init scroll
if (contextWidth * scaleRatio < width && contextHeight * scaleRatio < height) {
if (contextWidth * scaleRatio <= width && contextHeight * scaleRatio <= height) {
// make context center
this._ctx.setTransform({
scrollX: (width - contextWidth * scaleRatio) / 2,
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,
})
}
}
const { scrollX, scrollY } = this._ctx.getTransform();

3
scripts/screen.config.js
View file

@ -2,6 +2,9 @@ const pageList = [
{ path: 'board/examples/test/main.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/transform-small.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/transform-large.html', w: 600, h: 400, delay: 1000 },
{ 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: '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 },