diff --git a/packages/board/example/basic/index.html b/packages/board/example/basic/index.html
new file mode 100644
index 0000000..364def1
--- /dev/null
+++ b/packages/board/example/basic/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/board/example/basic/main.js b/packages/board/example/basic/main.js
new file mode 100644
index 0000000..fa87243
--- /dev/null
+++ b/packages/board/example/basic/main.js
@@ -0,0 +1,24 @@
+const { Board } = window.iDraw;
+
+const mount = document.querySelector('#mount');
+const board = new Board(mount, {
+ width: 600,
+ height: 400,
+ devicePixelRatio: 4
+});
+
+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();
diff --git a/packages/board/example/index.html b/packages/board/example/index.html
deleted file mode 100644
index 8673c69..0000000
--- a/packages/board/example/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/board/example/main.js b/packages/board/example/main.js
deleted file mode 100644
index 2e8c625..0000000
--- a/packages/board/example/main.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const { Board } = window.iDraw;
-
-const mount = document.querySelector('#mount');
-const board = new Board(mount, {
- width: 600,
- height: 400,
- devicePixelRatio: 4
-});
-board.render();
\ No newline at end of file
diff --git a/packages/board/example/scale/index.html b/packages/board/example/scale/index.html
new file mode 100644
index 0000000..364def1
--- /dev/null
+++ b/packages/board/example/scale/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/board/example/scale/main.js b/packages/board/example/scale/main.js
new file mode 100644
index 0000000..0ae202e
--- /dev/null
+++ b/packages/board/example/scale/main.js
@@ -0,0 +1,27 @@
+const { Board } = window.iDraw;
+
+const mount = document.querySelector('#mount');
+const board = new Board(mount, {
+ width: 600,
+ height: 400,
+ devicePixelRatio: 4
+});
+
+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();
+
+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 f12cfe4..7a38a10 100644
--- a/packages/board/src/index.ts
+++ b/packages/board/src/index.ts
@@ -15,30 +15,62 @@ type PrivateOptions = Options & {
class Board {
private _canvas: HTMLCanvasElement;
+ private _displayCanvas: HTMLCanvasElement;
private _mount: HTMLDivElement;
private _opts: PrivateOptions;
private _hasRendered: boolean = false;
private _ctx: Context;
+ private _displayCtx: CanvasRenderingContext2D;
+ private _scaleRatio: number = 1;
// private _watcher: Watcher;
constructor(mount: HTMLDivElement, opts: Options) {
this._mount = mount;
this._canvas = document.createElement('canvas');
- this._mount.appendChild(this._canvas);
+ this._displayCanvas = document.createElement('canvas');
+ this._mount.appendChild(this._displayCanvas);
this._opts = this._parsePrivateOptions(opts);
const ctx = this._canvas.getContext('2d') as CanvasRenderingContext2D;
+ const displayCtx = this._displayCanvas.getContext('2d') as CanvasRenderingContext2D;
this._ctx = new Context(ctx, this._opts);
+ this._displayCtx = displayCtx;
// this._watcher = new Watcher(this._canvas);
+ this._render();
}
- render() {
+ getContext(): Context {
+ return this._ctx;
+ }
+
+ scale(scaleRatio: number) {
+ this._scaleRatio = scaleRatio;
+ }
+
+ draw() {
+ this.clear();
+ this._displayCtx.drawImage(
+ this._canvas, 0, 0,
+ this._canvas.width * this._scaleRatio,
+ this._canvas.height * this._scaleRatio,
+ );
+ }
+
+ clear() {
+ this._displayCtx.clearRect(0, 0, this._canvas.width * this._scaleRatio, this._canvas.height * this._scaleRatio)
+ }
+
+ private _render() {
if (this._hasRendered === true) {
return;
}
const { width, height, devicePixelRatio } = this._opts;
this._canvas.width = width * devicePixelRatio;
this._canvas.height = height * devicePixelRatio;
- setStyle(this._canvas, {
+
+ this._displayCanvas.width = this._canvas.width;
+ this._displayCanvas.height = this._canvas.height;
+
+ setStyle(this._displayCanvas, {
width: `${width}px`,
height: `${height}px`,
});
@@ -47,14 +79,6 @@ class Board {
// this._watcher.onMoveEnd(this._onMoveEnd.bind(this));
this._hasRendered = true;
}
-
- draw() {
- // TODO
- }
-
- getContext(): Context {
- return this._ctx;
- }
private _parsePrivateOptions(opts: Options): PrivateOptions {
const defaultOpts = {