diff --git a/packages/board/example/features/lib/action.js b/packages/board/example/features/lib/action.js index 473a0af..9353d65 100644 --- a/packages/board/example/features/lib/action.js +++ b/packages/board/example/features/lib/action.js @@ -1,5 +1,7 @@ import { getData } from "./data.js"; import { drawData } from './draw.js'; +import { getScale } from './scale.js'; +import opts from './opts.js' function isPointInElement(board, p = {x, y}) { const ctx = board.getContext(); @@ -13,6 +15,7 @@ function isPointInElement(board, p = {x, y}) { ctx.lineTo(ele.x + ele.w, ele.y + ele.h); ctx.lineTo(ele.x, ele.y + ele.h); ctx.closePath(); + if (ctx.isPointInPath(p.x, p.y)) { idx = i; break; @@ -23,9 +26,12 @@ function isPointInElement(board, p = {x, y}) { function moveElement(board, idx, moveX, moveY) { const data = getData(); + const scale = getScale(); if (data.elements[idx]) { - data.elements[idx].x += moveX; - data.elements[idx].y += moveY; + // data.elements[idx].x += (moveX * scale * opts.devicePixelRatio); + // data.elements[idx].y += (moveY * scale * opts.devicePixelRatio); + data.elements[idx].x += (moveX / scale); + data.elements[idx].y += (moveY / scale); } drawData(board) } diff --git a/packages/board/example/features/lib/draw.js b/packages/board/example/features/lib/draw.js index 8488196..28b15cb 100644 --- a/packages/board/example/features/lib/draw.js +++ b/packages/board/example/features/lib/draw.js @@ -6,6 +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); data.elements.forEach(ele => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); diff --git a/packages/board/example/features/lib/scale.js b/packages/board/example/features/lib/scale.js index fa5bd66..d239789 100644 --- a/packages/board/example/features/lib/scale.js +++ b/packages/board/example/features/lib/scale.js @@ -1,8 +1,13 @@ const input = document.querySelector('#scale'); let hasInited = false; -export function doScale(board) { +export function doScale(board, scale) { if (hasInited === true) return; + if (scale > 0) { + input.value = scale; + board.scale(scale); + board.draw(); + } input.addEventListener('change', () => { const val = input.value * 1; if (val > 0) { @@ -11,4 +16,12 @@ export function doScale(board) { } }); hasInited = true; +} + +export function getScale() { + let val = 1; + if (input.value * 1 > 0) { + val = input.value * 1; + } + return val; } \ No newline at end of file diff --git a/packages/board/example/features/lib/scroll.js b/packages/board/example/features/lib/scroll.js index 4b9d810..3791640 100644 --- a/packages/board/example/features/lib/scroll.js +++ b/packages/board/example/features/lib/scroll.js @@ -2,18 +2,31 @@ const inputX = document.querySelector('#scrollX'); const inputY = document.querySelector('#scrollY'); let hasInited = false; -export function doScroll(board) { +export function doScroll(board, conf = {}) { if (hasInited === true) return; + + if (conf.scrollX >= 0) { + inputX.value = conf.scrollX; + board.scrollX(conf.scrollX); + board.draw(); + } + + if (conf.scrollY >= 0) { + inputY.value = conf.scrollY; + board.scrollY(conf.scrollY); + board.draw(); + } + inputX.addEventListener('change', () => { const val = inputX.value * 1; - if (val > 0) { + if (val >= 0) { board.scrollX(val); board.draw(); } }); inputY.addEventListener('change', () => { const val = inputY.value * 1; - if (val > 0) { + if (val >= 0) { board.scrollY(val); board.draw(); } diff --git a/packages/board/example/features/main.js b/packages/board/example/features/main.js index fc25e1c..1049035 100644 --- a/packages/board/example/features/main.js +++ b/packages/board/example/features/main.js @@ -9,11 +9,23 @@ const { Board } = window.iDraw; const mount = document.querySelector('#mount'); const board = new Board(mount, opts); +const conf = { + scale: 0.5, + scrollX: 100, + scrollY: 200, +} + +// const conf = { +// scale: 1, +// scrollX: 0, +// scrollY: 0, +// } + drawData(board); initEvent(board); -doScale(board); -doScroll(board); +doScale(board, conf.scale); +doScroll(board, conf); // board.scale(2); diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts index ac2ec57..1bfb543 100644 --- a/packages/board/src/index.ts +++ b/packages/board/src/index.ts @@ -47,15 +47,24 @@ class Board { } scale(scaleRatio: number) { - if (scaleRatio > 0) this._scaleRatio = scaleRatio; + if (scaleRatio > 0) { + this._scaleRatio = scaleRatio; + this._ctx.setConfig({ scale: scaleRatio }); + } } scrollX(x: number) { - if (x > 0) this._scrollX = x; + if (x >= 0) { + this._scrollX = x; + this._ctx.setConfig({ scrollX: x }); + } } scrollY(y: number) { - if (y > 0) this._scrollY = y; + if (y >= 0) { + this._scrollY = y; + this._ctx.setConfig({ scrollY: y }); + } } draw() { diff --git a/packages/board/src/util/context.ts b/packages/board/src/util/context.ts index bea8e05..69a3df5 100644 --- a/packages/board/src/util/context.ts +++ b/packages/board/src/util/context.ts @@ -4,9 +4,22 @@ type Options = { devicePixelRatio: number; } +type Config = { + scale?: number; + scrollX?: number; + scrollY?: number; +} + +type PrivateConfig = { + scale: number; + scrollX: number; + scrollY: number; +} + class Context { private _opts: Options; private _ctx: CanvasRenderingContext2D; + private _conf: PrivateConfig; // private _scale: number; // private _scrollX: number; @@ -15,6 +28,15 @@ class Context { constructor(ctx: CanvasRenderingContext2D, opts: Options) { this._opts = opts; this._ctx = ctx; + this._conf = { + scale: 1, + scrollX: 0, + scrollY: 0, + } + } + + setConfig(config: Config) { + this._conf = {...this._conf, ...config}; } setFillStyle(color: string) { @@ -51,14 +73,38 @@ class Context { return this._ctx.lineTo(this._doSize(x), this._doSize(y)); } + setLineWidth(w: number) { + this._ctx.lineWidth = w; + } + isPointInPath(x: number, y: number) { - return this._ctx.isPointInPath(this._doSize(x), this._doSize(y)); + return this._ctx.isPointInPath(this._doX(x), this._doY(y)); + } + + setStrokeStyle(color: string) { + this._ctx.strokeStyle = color; + } + + stroke() { + return this._ctx.stroke(); } private _doSize(num: number) { return this._opts.devicePixelRatio * num; } + private _doX(x: number) { + const { scale, scrollX } = this._conf; + const _x = (x - scrollX * scale) / scale; + return this._doSize(_x); + } + + private _doY(y: number) { + const { scale, scrollY } = this._conf; + const _y = (y - scrollY * scale) / scale; + return this._doSize(_y); + } + } export default Context; \ No newline at end of file