diff --git a/packages/core/src/tools/ellipse-tool.ts b/packages/core/src/tools/ellipse-tool.ts index 93881de6..015fdbf8 100644 --- a/packages/core/src/tools/ellipse-tool.ts +++ b/packages/core/src/tools/ellipse-tool.ts @@ -48,8 +48,7 @@ class EllipseTool implements Tool { // 根据起点和鼠标位置计算椭圆的中心位置 const centerX = this.startPointer.x + dx / 2; const centerY = this.startPointer.y + dy / 2; - this.ellipse.x(centerX); - this.ellipse.y(centerY); + this.ellipse.setPosition(new Point(centerX, centerY)); this.ellipse.radiusX(radiusX); this.ellipse.radiusY(radiusY); app.render(); diff --git a/packages/core/src/tools/line-tool.ts b/packages/core/src/tools/line-tool.ts index ba150f88..5c5a8d2c 100644 --- a/packages/core/src/tools/line-tool.ts +++ b/packages/core/src/tools/line-tool.ts @@ -3,6 +3,8 @@ import { Line } from '../customs/line'; import { AppMouseEvent, Tool } from '../types'; import { Point } from '../utils'; +import { selectTool } from './select-tool'; + class LineTool implements Tool { public name: string = 'polylineTool'; private points: Point[] = []; @@ -18,12 +20,42 @@ class LineTool implements Tool { } public onMouseDown({ app }: AppMouseEvent): void { - console.log('===>', app); + const lastPoint = this.points.at(-1); + if (!lastPoint || !lastPoint.eq(app.pointer)) { + this.points.push(app.pointer); + } + if (this.line) { + this.line.points(this.flatPoints()); + } else { + this.line = new Line({ + points: this.flatPoints(), + fill: 'transparent', + stroke: 'black', + strokeWidth: 2, + }); + app.add(this.line); + } } - public onMouseMove(): void {} + public onMouseMove({ app }: AppMouseEvent): void { + if (!this.line) { + return; + } + this.line.points(this.flatPoints().concat(app.pointer.x, app.pointer.y)); + app.render(); + } - public onMouseDoubleClick() {} + public onMouseDoubleClick({ app }: AppMouseEvent): void { + if (!this.line) { + return; + } + app.select(this.line); + app.setTool(selectTool); + } + + private flatPoints(): number[] { + return this.points.reduce((points, point) => [...points, ...point.toArray()], []); + } } export const lineTool = new LineTool(); diff --git a/packages/core/src/tools/rect-tool.ts b/packages/core/src/tools/rect-tool.ts index e256842f..414918fe 100644 --- a/packages/core/src/tools/rect-tool.ts +++ b/packages/core/src/tools/rect-tool.ts @@ -35,8 +35,9 @@ class RectTool implements Tool { if (!this.rectangle) { return; } - this.rectangle.x(Math.min(this.startPointer.x, app.pointer.x)); - this.rectangle.y(Math.min(this.startPointer.y, app.pointer.y)); + this.rectangle.setPosition( + new Point(Math.min(this.startPointer.x, app.pointer.x), Math.min(this.startPointer.y, app.pointer.y)) + ); this.rectangle.width(Math.abs(app.pointer.x - this.startPointer.x)); this.rectangle.height(Math.abs(app.pointer.y - this.startPointer.y)); app.render(); diff --git a/packages/core/src/utils/math.ts b/packages/core/src/utils/math.ts index 5beb161d..62b3df2a 100644 --- a/packages/core/src/utils/math.ts +++ b/packages/core/src/utils/math.ts @@ -21,4 +21,12 @@ export class Point implements Konva.Vector2d { this.x = x; this.y = y; } + + public eq(point: Point): boolean { + return this.x === point.x && this.y === point.y; + } + + public toArray(): number[] { + return [this.x, this.y]; + } }