feat: 增加线工具

main/src/view/canvas/index.vue

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

packages/core/src/customs/line.ts

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

packages/core/src/index.ts

@@ -5,3 +5,4 @@ export * from './tools/rect-tool';
 export * from './tools/select-tool';
 export * from './tools/ellipse-tool';
 export * from './tools/triangle-tool';
+export * from './tools/line-tool';

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

@@ -0,0 +1,45 @@
+import { fabric } from 'fabric';
+
+import { Line } from '../customs/line';
+import { AppMouseEvent, ToolStrategy } from '../types';
+
+import { selectTool } from './select-tool';
+
+class LineTool implements ToolStrategy {
+  public drawable: boolean = true;
+  private startPointer: fabric.Point = new fabric.Point(0, 0);
+  private line: Line | null = null;
+
+  public onMouseDown({ app }: AppMouseEvent): void {
+    app.canvas.selection = false;
+    this.startPointer = app.pointer;
+    this.line = new Line([this.startPointer.x, this.startPointer.y, this.startPointer.x, this.startPointer.y], {
+      fill: 'transparent',
+      stroke: 'black',
+      strokeWidth: 2,
+    });
+    app.canvas.add(this.line);
+  }
+
+  public onMouseMove({ app }: AppMouseEvent): void {
+    if (!this.line) {
+      return;
+    }
+    const endX = app.pointer.x;
+    const endY = app.pointer.y;
+    this.line.set({ x2: endX, y2: endY });
+    app.render(); // Call render after updating the line
+  }
+
+  public onMouseUp({ app }: AppMouseEvent): void {
+    app.setTool(selectTool);
+    this.startPointer.setXY(0, 0);
+    this.line && app.canvas.setActiveObject(this.line);
+    this.line = null;
+    app.render(true);
+  }
+}
+
+export const lineTool = new LineTool();
+
+export default lineTool;