feat: 新增圆形绘制

main/src/view/canvas/index.vue

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

packages/core/src/customs/circle.ts

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

packages/core/src/customs/rect.ts

@@ -1,8 +1,8 @@
 import { fabric } from 'fabric';
 
 export class Rect extends fabric.Rect {
-  public _render(ctx: CanvasRenderingContext2D): void {
-    super._render(ctx);
+  public render(ctx: CanvasRenderingContext2D): void {
+    super.render(ctx);
   }
 }
 

packages/core/src/index.ts

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

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

@@ -0,0 +1,61 @@
+import { fabric } from 'fabric';
+
+import { Circle } from '../customs/circle';
+import { AppMouseEvent, ToolStrategy } from '../types';
+
+import { selectTool } from './select-tool';
+
+class CircleTool implements ToolStrategy {
+  private startPointer: fabric.Point = new fabric.Point(0, 0);
+  private circle: Circle | null = null;
+
+  public onMouseDown({ app }: AppMouseEvent): void {
+    app.canvas.selection = false;
+    this.startPointer = app.pointer;
+    this.circle = new Circle({
+      left: this.startPointer.x,
+      top: this.startPointer.y,
+      rx: 0,
+      ry: 0,
+      fill: 'transparent',
+      stroke: 'black',
+      strokeWidth: 2,
+    });
+    app.canvas.add(this.circle);
+  }
+
+  public onMouseMove({ app }: AppMouseEvent): void {
+    if (!this.circle) {
+      return;
+    }
+    app.canvas.discardActiveObject();
+    app.render();
+
+    // 计算起点和当前鼠标位置之间的距离
+    const dx = app.pointer.x - this.startPointer.x;
+    const dy = app.pointer.y - this.startPointer.y;
+
+    // 计算椭圆的宽度和高度的绝对值
+    const radiusX = Math.abs(dx) / 2;
+    const radiusY = Math.abs(dy) / 2;
+
+    // 根据起点和鼠标位置计算椭圆的中心位置
+    const centerX = this.startPointer.x + dx / 2;
+    const centerY = this.startPointer.y + dy / 2;
+
+    this.circle.set({ rx: radiusX, ry: radiusY, left: centerX - radiusX, top: centerY - radiusY });
+    app.render();
+  }
+
+  public onMouseUp({ app }: AppMouseEvent): void {
+    app.setTool(selectTool);
+    this.startPointer.setXY(0, 0);
+    this.circle && app.canvas.setActiveObject(this.circle);
+    this.circle = null;
+    app.render(true);
+  }
+}
+
+export const circleTool = new CircleTool();
+
+export default circleTool;

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

@@ -41,8 +41,8 @@ class RectTool implements ToolStrategy {
     app.setTool(selectTool);
     this.startPointer.setXY(0, 0);
     this.rectangle && app.canvas.setActiveObject(this.rectangle);
-    app.render();
     this.rectangle = null;
+    app.render(true);
   }
 }