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/example/features

Browse source
This commit is contained in:
chenshenhai 2021-05-25 10:39:56 +08:00
parent 91da17bbd3
commit 2f580a3569
5 changed files with 87 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
packages/board/example/features/index.html Normal file
View file

@ -0,0 +1,38 @@
<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>
<div>
<span>scale</span>
<input id="scale" type="number" value="1"/>
</div>
<div>
<span>scrollX</span>
<input id="scaleX" type="number"/>
</div>
<div>
<span>scrollY</span>
<input id="scrollY" type="number"/>
</div>
<script src="./../../dist/index.global.js"></script>
<script type="module" src="./main.js"></script>
</body>
</html>

17
packages/board/example/features/lib/draw.js Normal file
View file

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

14
packages/board/example/features/lib/scale.js Normal file
View file

@ -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;
}

17
packages/board/example/features/main.js Normal file
View file

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

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

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