feat: 新增triangleTool

Author: JessYan0913

main/src/view/canvas/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { App, ellipseTool, rectTool, selectTool } from '@pictode/core';
+import { App, ellipseTool, rectTool, selectTool, triangleTool } from '@pictode/core';
 
 const containerRef = ref<HTMLDivElement>();
 
@@ -19,6 +19,7 @@ onMounted(() => {
       <!-- <button @click="app.setModel('drawing')">铅笔✏️</button> -->
       <button @click="app.setTool(rectTool)">矩形⬜️</button>
       <button @click="app.setTool(ellipseTool)">圆形⭕️</button>
+      <button @click="app.setTool(triangleTool)">三角形🔺</button>
     </div>
     <div ref="containerRef" class="container"></div>
   </div>

packages/core/src/customs/triangle.ts

@@ -0,0 +1,9 @@
+import { fabric } from 'fabric';
+
+export class Triangle extends fabric.Triangle {
+  public render(ctx: CanvasRenderingContext2D): void {
+    super.render(ctx);
+  }
+}
+
+export default Triangle;

packages/core/src/index.ts

@@ -4,3 +4,4 @@ export * from './decorators/expand-app';
 export * from './tools/rect-tool';
 export * from './tools/select-tool';
 export * from './tools/ellipse-tool';
+export * from './tools/triangle-tool';

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

@@ -0,0 +1,49 @@
+import { fabric } from 'fabric';
+
+import { Triangle } from '../customs/triangle';
+import { AppMouseEvent, ToolStrategy } from '../types';
+
+import { selectTool } from './select-tool';
+
+class TriangleTool implements ToolStrategy {
+  public drawable: boolean = true;
+  private startPointer: fabric.Point = new fabric.Point(0, 0);
+  private triangle: Triangle | null = null;
+
+  public onMouseDown({ app }: AppMouseEvent): void {
+    app.canvas.selection = false;
+    this.startPointer = app.pointer;
+    this.triangle = new Triangle({
+      top: this.startPointer.y,
+      left: this.startPointer.x,
+      width: 0,
+      height: 0,
+      fill: 'transparent',
+      stroke: 'black',
+      strokeWidth: 2,
+    });
+    app.canvas.add(this.triangle);
+  }
+
+  public onMouseMove({ app }: AppMouseEvent): void {
+    if (!this.triangle) {
+      return;
+    }
+    const width = Math.abs(app.pointer.x - this.startPointer.x);
+    const height = Math.abs(app.pointer.y - this.startPointer.y);
+    this.triangle.set({ width, height });
+    app.render(); // Call render after updating the triangle
+  }
+
+  public onMouseUp({ app }: AppMouseEvent): void {
+    app.setTool(selectTool);
+    this.startPointer.setXY(0, 0);
+    this.triangle && app.canvas.setActiveObject(this.triangle);
+    this.triangle = null;
+    app.render(true);
+  }
+}
+
+export const triangleTool = new TriangleTool();
+
+export default triangleTool;