feat: 实现三角形工具

Author: JessYan0913

packages/core/src/tools/triangle-tool.ts

@@ -1,10 +1,45 @@
+import { Triangle } from '../customs/triangle';
 import { Tool } from '../types';
+import { Point } from '../utils';
+
+import { selectTool } from './select-tool';
 
 export const triangleTool = (): Tool => {
+  const startPointer: Point = new Point(0, 0);
+  const triangle: Triangle = new Triangle({
+    fill: 'transparent',
+    stroke: 'black',
+    strokeWidth: 2,
+    sides: 3,
+    radius: 0,
+  });
+
   return {
     name: 'triangleTool',
-    onActive() {},
-    onInactive() {},
+    onActive(app) {
+      app.cancelSelect();
+    },
+    onInactive() {
+      startPointer.setXY(0, 0);
+    },
+    onMouseDown({ app }) {
+      startPointer.clone(app.pointer);
+      triangle.setPosition(startPointer);
+      app.add(triangle);
+    },
+    onMouseMove({ app }) {
+      // 计算起点和当前鼠标位置之间的距离
+      const dx = app.pointer.x - startPointer.x;
+      const dy = app.pointer.y - startPointer.y;
+
+      // 计算椭圆的宽度和高度的绝对值
+      triangle.setPosition(new Point(startPointer.x + dx / 2, startPointer.y + dy / 2));
+      triangle.radius(startPointer.distanceTo(app.pointer));
+      app.render();
+    },
+    onMouseUp({ app }) {
+      app.setTool(selectTool(triangle));
+    },
   };
 };
 

packages/core/src/utils/math.ts

@@ -26,6 +26,12 @@ export class Point implements Konva.Vector2d {
     return this.x === point.x && this.y === point.y;
   }
 
+  public distanceTo(point: Point): number {
+    const dx = this.x - point.x;
+    const dy = this.y - point.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
   public toArray(): number[] {
     return [this.x, this.y];
   }