From 4e76c72ff9d1001037d0ce3d4739e30d72ebf313 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Wed, 14 Jul 2021 22:05:24 +0800 Subject: [PATCH] feat: @idraw/board add screen point translate --- packages/board/__tests__/point.test.ts | 41 ++++++++++++++++++++ packages/board/examples/features/lib/data.js | 41 +++++++++----------- packages/board/examples/features/lib/draw.js | 4 +- packages/board/examples/features/main.js | 25 ++++++------ packages/board/src/index.ts | 18 +++++++++ 5 files changed, 94 insertions(+), 35 deletions(-) create mode 100644 packages/board/__tests__/point.test.ts diff --git a/packages/board/__tests__/point.test.ts b/packages/board/__tests__/point.test.ts new file mode 100644 index 0000000..1c24bdf --- /dev/null +++ b/packages/board/__tests__/point.test.ts @@ -0,0 +1,41 @@ +import Board from '../src'; + +describe('@idraw/board', () => { + + + document.body.innerHTML = ` +
+ `; + const opts = { + width: 800, + height: 600, + contextWidth: 600, + contextHeight: 400, + devicePixelRatio: 4, + canScroll: true, + }; + const transform = { + scale: 2, + scrollX: -200, + scrollY: -100, + }; + const mount = document.querySelector('#mount') as HTMLDivElement; + const board = new Board(mount, opts); + + test('scroll', async () => { + + board.scale(transform.scale); + board.scrollX(transform.scrollX); + board.scrollY(transform.scrollY); + board.draw(); + + const p1 = {x: 400, y: 300}; + const p2 = {x: 300, y: 200}; + + expect(board.pointScreenToContext(p1)).toStrictEqual(p2); + expect(board.pointContextToScreen(p2)).toStrictEqual(p1); + }); + + +}); + diff --git a/packages/board/examples/features/lib/data.js b/packages/board/examples/features/lib/data.js index 222e882..6c27ea0 100644 --- a/packages/board/examples/features/lib/data.js +++ b/packages/board/examples/features/lib/data.js @@ -1,4 +1,3 @@ - const data = { elements: [ { @@ -6,58 +5,56 @@ const data = { y: 10, w: 200, h: 120, - type: 'rect', + type: "rect", desc: { - color: '#f0f0f0', - } + color: "#f0f0f0", + }, }, { x: 80, y: 80, w: 200, h: 120, - type: 'rect', + type: "rect", desc: { - color: '#cccccc', - } + color: "#cccccc", + }, }, { x: 160, y: 160, w: 200, h: 120, - type: 'rect', + type: "rect", desc: { - color: '#c0c0c0', - } + color: "#c0c0c0", + }, }, { x: 400 - 10, y: 300 - 10, w: 200, h: 100, - type: 'rect', + type: "rect", desc: { - color: '#e0e0e0', - } + color: "#e0e0e0", + }, }, { x: 300 - 10, y: 200 - 10, w: 20, h: 20, - type: 'rect', + type: "rect", desc: { - color: '#000000', - } - } - ] -} + color: "#000000", + }, + }, + ], +}; function getData() { return data; } -export { - getData -}; \ No newline at end of file +export { getData }; diff --git a/packages/board/examples/features/lib/draw.js b/packages/board/examples/features/lib/draw.js index 28b15cb..28e2b70 100644 --- a/packages/board/examples/features/lib/draw.js +++ b/packages/board/examples/features/lib/draw.js @@ -6,8 +6,8 @@ export function drawData(board) { const data = getData(); board.clear(); ctx.clearRect(0, 0, opts.width, opts.height); - ctx.setFillStyle('#ffffff'); - ctx.fillRect(0, 0, opts.width, opts.height); + // ctx.setFillStyle('#ffffff'); + // ctx.fillRect(0, 0, opts.width, opts.height); data.elements.forEach(ele => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); diff --git a/packages/board/examples/features/main.js b/packages/board/examples/features/main.js index 6b07a85..c24ff0e 100644 --- a/packages/board/examples/features/main.js +++ b/packages/board/examples/features/main.js @@ -1,13 +1,13 @@ -import opts from './lib/opts.js'; -import { drawData } from './lib/draw.js'; -import { doScale } from './lib/scale.js'; -import { doScroll } from './lib/scroll.js'; -import { initEvent } from './lib/event.js'; -import { doCursor } from './lib/action.js'; +import opts from "./lib/opts.js"; +import { drawData } from "./lib/draw.js"; +import { doScale } from "./lib/scale.js"; +import { doScroll } from "./lib/scroll.js"; +import { initEvent } from "./lib/event.js"; +import { doCursor } from "./lib/action.js"; -const { Board } = window.iDraw; +const { Board } = window.iDraw; -const mount = document.querySelector('#mount'); +const mount = document.querySelector("#mount"); const board = new Board(mount, opts); // const conf = { @@ -20,15 +20,18 @@ const conf = { scale: 2, scrollX: -200, scrollY: -100, -} +}; drawData(board); initEvent(board); doScale(board, conf.scale); doScroll(board, conf); -doCursor(board) +doCursor(board); +console.log('pointScreenToContext = ', board.pointScreenToContext({ x: 400, y: 300 })); + +console.log('pointContextToScreen = ', board.pointContextToScreen({ x: 300, y: 200 })); // board.scale(2); -// board.draw(); \ No newline at end of file +// board.draw(); diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts index c742754..5215aaf 100644 --- a/packages/board/src/index.ts +++ b/packages/board/src/index.ts @@ -170,6 +170,24 @@ class Board { return lineWidth; } + pointScreenToContext(screenPoint: TypePoint): TypePoint { + const { scrollX, scrollY, scale } = this.getTransform(); + const ctxPoint = { + x: (screenPoint.x - scrollX) / scale, + y: (screenPoint.y - scrollY) / scale, + }; + return ctxPoint; + } + + pointContextToScreen(ctxPoint: TypePoint): TypePoint { + const { scrollX, scrollY, scale } = this.getTransform(); + const screenPoint = { + x: ctxPoint.x * scale + scrollX, + y: ctxPoint.y * scale + scrollY, + }; + return screenPoint; + } + private [_render]() { if (this[_hasRendered] === true) { return;