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: update add helperContext to @idraw/board

Browse source
This commit is contained in:
chenshenhai 2021-11-15 22:33:45 +08:00
parent b147b19b32
commit 8230fe2598
10 changed files with 122 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/board/__tests__/__snapshots__/index.test.ts.snap
View file

@ -170,13 +170,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 3600,
"dWidth": 4000,
"dx": 0,
"dy": 0,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="3600"
width="4000"
/>,
"sHeight": 3600,
"sWidth": 4000,
"sx": 0,
"sy": 0,
},

13
packages/board/__tests__/__snapshots__/other-api.test.ts.snap
View file

@ -170,13 +170,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 1600,
"dWidth": 2400,
"dx": -2400,
"dy": -1600,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="1600"
width="2400"
/>,
"sHeight": 1600,
"sWidth": 2400,
"sx": 0,
"sy": 0,
},

52
packages/board/__tests__/__snapshots__/scale.test.ts.snap
View file

@ -170,13 +170,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 3600,
"dWidth": 4000,
"dx": 200,
"dy": 0,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="3600"
width="4000"
/>,
"sHeight": 3600,
"sWidth": 4000,
"sx": 0,
"sy": 0,
},
@ -363,13 +366,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 2400,
"dWidth": 4800,
"dx": 0,
"dy": 200,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="2400"
width="4800"
/>,
"sHeight": 2400,
"sWidth": 4800,
"sx": 0,
"sy": 0,
},
@ -556,13 +562,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 2400,
"dWidth": 4000,
"dx": 0,
"dy": 0,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="2400"
width="4000"
/>,
"sHeight": 2400,
"sWidth": 4000,
"sx": 0,
"sy": 0,
},
@ -749,13 +758,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 1600,
"dWidth": 2400,
"dx": 600,
"dy": 400,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="1600"
width="2400"
/>,
"sHeight": 1600,
"sWidth": 2400,
"sx": 0,
"sy": 0,
},

13
packages/board/__tests__/__snapshots__/scroll.test.ts.snap
View file

@ -170,13 +170,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 1600,
"dWidth": 2400,
"dx": -2400,
"dy": -1600,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="1600"
width="2400"
/>,
"sHeight": 1600,
"sWidth": 2400,
"sx": 0,
"sy": 0,
},

13
packages/board/__tests__/__snapshots__/wheel.test.ts.snap
View file

@ -170,13 +170,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 1600,
"dWidth": 2400,
"dx": -2400,
"dy": -1600,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="1600"
width="2400"
/>,
"sHeight": 1600,
"sWidth": 2400,
"sx": 0,
"sy": 0,
},

2
packages/board/examples/features/lib/action.js
View file

@ -33,7 +33,7 @@ function moveElement(board, idx, moveX, moveY) {
data.elements[idx].x += (moveX / scale);
data.elements[idx].y += (moveY / scale);
}
drawData(board)
drawData(board, idx)
}
const cursor = document.querySelector('#cursor');

25
packages/board/examples/features/lib/draw.js
View file

@ -1,16 +1,37 @@
import opts from './opts.js';
import { getData } from './data.js';
export function drawData(board) {
export function drawData(board, idx) {
const ctx = board.getContext();
const helperCtx = board.getHelperContext();
const data = getData();
board.clear();
ctx.clearRect(0, 0, opts.width, opts.height);
helperCtx.clearRect(0, 0, opts.width, opts.height);
// ctx.setFillStyle('#ffffff');
// ctx.fillRect(0, 0, opts.width, opts.height);
data.elements.forEach(ele => {
data.elements.forEach((ele, i) => {
ctx.setFillStyle(ele.desc.color);
ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
// helperCtx.setFillStyle('#2196f3');
// helperCtx.fillRect(ele.x, ele.y, ele.w, ele.h);
if (i === idx) {
helperCtx.beginPath();
helperCtx.setLineDash([4, 4]);
helperCtx.setLineWidth(2);
helperCtx.setStrokeStyle('#2196f3');
helperCtx.moveTo(ele.x, ele.y);
helperCtx.lineTo(ele.x + ele.w, ele.y);
helperCtx.lineTo(ele.x + ele.w, ele.y + ele.h);
helperCtx.lineTo(ele.x, ele.y + ele.h);
helperCtx.lineTo(ele.x, ele.y);
helperCtx.stroke();
helperCtx.closePath();
}
});
board.draw();
}

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

@ -49,16 +49,17 @@ class Board {
this[_displayCanvas] = document.createElement('canvas');
this[_mount].appendChild(this[_displayCanvas]);
this[_opts] = this[_parsePrivateOptions](opts);
const originCtx = this[_canvas].getContext('2d') as CanvasRenderingContext2D;
const displayCtx = this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D;
const helperCtx = this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D;
this[_ctx] = new Context(originCtx, this[_opts]);
this[_helperCtx] = new Context(helperCtx, this[_opts]);
const originCtx2d = this[_canvas].getContext('2d') as CanvasRenderingContext2D;
const displayCtx2d = this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D;
const helperCtx2d = this[_helperCanvas].getContext('2d') as CanvasRenderingContext2D;
this[_ctx] = new Context(originCtx2d, this[_opts]);
this[_helperCtx] = new Context(helperCtx2d, this[_opts]);
this[_screen] = new Screen(this[_ctx], this[_opts]);
// this[_watcher] = new Watcher(this[_displayCanvas]);
this[_watcher] = new ScreenWatcher(this[_displayCanvas], this[_ctx]);
this[_scroller] = new Scroller(
displayCtx, {
displayCtx2d, {
width: opts.width,
height: opts.height,
devicePixelRatio: opts.devicePixelRatio || 1,
@ -245,6 +246,9 @@ class Board {
this[_canvas].width = contextWidth * devicePixelRatio;
this[_canvas].height = contextHeight * devicePixelRatio;
this[_helperCanvas].width = contextWidth * devicePixelRatio;
this[_helperCanvas].height = contextHeight * devicePixelRatio;
this[_displayCanvas].width = width * devicePixelRatio;
this[_displayCanvas].height = height * devicePixelRatio;

13
packages/core/__tests__/__snapshots__/index.test.ts.snap
View file

@ -591,13 +591,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 1600,
"dWidth": 2400,
"dx": 0,
"dy": 0,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="1600"
width="2400"
/>,
"sHeight": 1600,
"sWidth": 2400,
"sx": 0,
"sy": 0,
},

26
packages/core/__tests__/__snapshots__/move.test.ts.snap
View file

@ -591,13 +591,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 1600,
"dWidth": 2400,
"dx": 0,
"dy": 0,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="1600"
width="2400"
/>,
"sHeight": 1600,
"sWidth": 2400,
"sx": 0,
"sy": 0,
},
@ -1205,13 +1208,16 @@ Array [
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dHeight": 1600,
"dWidth": 2400,
"dx": 0,
"dy": 0,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"img": <canvas
height="1600"
width="2400"
/>,
"sHeight": 1600,
"sWidth": 2400,
"sx": 0,
"sy": 0,
},