diff --git a/packages/board/example/features/index.html b/packages/board/example/features/index.html
new file mode 100644
index 0000000..4dcd79a
--- /dev/null
+++ b/packages/board/example/features/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+ scale
+
+
+
+ scrollX
+
+
+
+ scrollY
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/board/example/features/lib/draw.js b/packages/board/example/features/lib/draw.js
new file mode 100644
index 0000000..d16f7fa
--- /dev/null
+++ b/packages/board/example/features/lib/draw.js
@@ -0,0 +1,17 @@
+export function draw(board) {
+ const ctx = board.getContext();
+
+ 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.draw();
+}
\ No newline at end of file
diff --git a/packages/board/example/features/lib/scale.js b/packages/board/example/features/lib/scale.js
new file mode 100644
index 0000000..589d168
--- /dev/null
+++ b/packages/board/example/features/lib/scale.js
@@ -0,0 +1,14 @@
+const input = document.querySelector('#scale');
+let hasInited = false;
+
+export function onScale(board) {
+ if (hasInited === true) return;
+ input.addEventListener('change', () => {
+ const val = input.value * 1;
+ if (val > 0) {
+ board.scale(val);
+ board.draw();
+ }
+ });
+ hasInited = true;
+}
\ No newline at end of file
diff --git a/packages/board/example/features/main.js b/packages/board/example/features/main.js
new file mode 100644
index 0000000..1c54740
--- /dev/null
+++ b/packages/board/example/features/main.js
@@ -0,0 +1,17 @@
+import { draw } from './lib/draw.js';
+import { onScale } from './lib/scale.js';
+
+const { Board } = window.iDraw;
+
+const mount = document.querySelector('#mount');
+const board = new Board(mount, {
+ width: 600,
+ height: 400,
+ devicePixelRatio: 4
+});
+
+draw(board);
+onScale(board);
+
+// board.scale(2);
+// board.draw();
\ No newline at end of file
diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts
index 7a38a10..047fd36 100644
--- a/packages/board/src/index.ts
+++ b/packages/board/src/index.ts
@@ -56,7 +56,7 @@ class Board {
}
clear() {
- this._displayCtx.clearRect(0, 0, this._canvas.width * this._scaleRatio, this._canvas.height * this._scaleRatio)
+ this._displayCtx.clearRect(0, 0, this._displayCanvas.width, this._displayCanvas.height)
}
private _render() {