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

feat: add board.scale

Browse source
This commit is contained in:
chenshenhai 2021-05-24 21:50:42 +08:00
parent 8e1068cfb9
commit 91da17bbd3
7 changed files with 136 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/board/example/basic/index.html Normal file
View file

@ -0,0 +1,25 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
#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 src="./main.js"></script>
</body>
</html>

24
packages/board/example/basic/main.js Normal file
View file

@ -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();

18
packages/board/example/index.html
View file

@ -1,18 +0,0 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
#mount canvas {
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="mount"></div>
<script src="./../dist/index.global.js"></script>
<script src="./main.js"></script>
</body>
</html>

9
packages/board/example/main.js
View file

@ -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();

25
packages/board/example/scale/index.html Normal file
View file

@ -0,0 +1,25 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
#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 src="./main.js"></script>
</body>
</html>

27
packages/board/example/scale/main.js Normal file
View file

@ -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();

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

@ -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 = {