diff --git a/__tests__/snapshot/board/examples/test/scale-001.html.jpg b/__tests__/snapshot/board/examples/test/scale-001.html.jpg
new file mode 100644
index 0000000..5c5b0e0
Binary files /dev/null and b/__tests__/snapshot/board/examples/test/scale-001.html.jpg differ
diff --git a/__tests__/snapshot/board/examples/test/scale-002.html.jpg b/__tests__/snapshot/board/examples/test/scale-002.html.jpg
new file mode 100644
index 0000000..6da9842
Binary files /dev/null and b/__tests__/snapshot/board/examples/test/scale-002.html.jpg differ
diff --git a/__tests__/snapshot/board/examples/test/scale-003.html.jpg b/__tests__/snapshot/board/examples/test/scale-003.html.jpg
new file mode 100644
index 0000000..4841cad
Binary files /dev/null and b/__tests__/snapshot/board/examples/test/scale-003.html.jpg differ
diff --git a/__tests__/snapshot/board/examples/test/transform-large.html.jpg b/__tests__/snapshot/board/examples/test/transform-large.html.jpg
index e976943..37aa913 100644
Binary files a/__tests__/snapshot/board/examples/test/transform-large.html.jpg and b/__tests__/snapshot/board/examples/test/transform-large.html.jpg differ
diff --git a/__tests__/snapshot/board/examples/test/transform-small.html.jpg b/__tests__/snapshot/board/examples/test/transform-small.html.jpg
index 4ee944d..ce4a643 100644
Binary files a/__tests__/snapshot/board/examples/test/transform-small.html.jpg and b/__tests__/snapshot/board/examples/test/transform-small.html.jpg differ
diff --git a/__tests__/snapshot/core/examples/features/image.html.jpg b/__tests__/snapshot/core/examples/features/image.html.jpg
index 0b71d94..0be80fc 100644
Binary files a/__tests__/snapshot/core/examples/features/image.html.jpg and b/__tests__/snapshot/core/examples/features/image.html.jpg differ
diff --git a/__tests__/snapshot/core/examples/features/svg.html.jpg b/__tests__/snapshot/core/examples/features/svg.html.jpg
index 306d5bd..e270a15 100644
Binary files a/__tests__/snapshot/core/examples/features/svg.html.jpg and b/__tests__/snapshot/core/examples/features/svg.html.jpg differ
diff --git a/packages/board/examples/test/scale-001.html b/packages/board/examples/test/scale-001.html
new file mode 100644
index 0000000..42ad060
--- /dev/null
+++ b/packages/board/examples/test/scale-001.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/board/examples/test/scale-002.html b/packages/board/examples/test/scale-002.html
new file mode 100644
index 0000000..6f87ed2
--- /dev/null
+++ b/packages/board/examples/test/scale-002.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/board/examples/test/scale-003.html b/packages/board/examples/test/scale-003.html
new file mode 100644
index 0000000..3f752e1
--- /dev/null
+++ b/packages/board/examples/test/scale-003.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/board/examples/test/transform-large.html b/packages/board/examples/test/transform-large.html
index 03b58be..fc2f3f0 100644
--- a/packages/board/examples/test/transform-large.html
+++ b/packages/board/examples/test/transform-large.html
@@ -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);
diff --git a/packages/board/examples/test/transform-small.html b/packages/board/examples/test/transform-small.html
index e345d0f..3a90e83 100644
--- a/packages/board/examples/test/transform-small.html
+++ b/packages/board/examples/test/transform-small.html
@@ -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();
diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts
index 764d895..b2c5d40 100644
--- a/packages/board/src/index.ts
+++ b/packages/board/src/index.ts
@@ -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();
diff --git a/scripts/screen.config.js b/scripts/screen.config.js
index d72cffc..2afdfb0 100644
--- a/scripts/screen.config.js
+++ b/scripts/screen.config.js
@@ -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 },