feat: 实现折线绘制

Author: Yan Heng

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

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<number[]>((points, point) => [...points, ...point.toArray()], []);
+  }
 }
 
 export const lineTool = new LineTool();

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

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];
+  }
 }