feat: 增加矩形绘制工具

Author: Yan Heng

main/src/view/canvas/index.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { App } from '@pictode/core';
+import { App, RectTool, SelectTool } from '@pictode/core';
 
 const containerRef = ref<HTMLDivElement>();
 
 const app = new App();
+const selectTool = new SelectTool(app);
+const rectTool = new RectTool(app);
 onMounted(() => {
   if (containerRef.value) {
     app.mount(containerRef.value);
@@ -15,9 +17,9 @@ onMounted(() => {
 <template>
   <div class="wrapper">
     <div class="tools">
-      <button @click="app.setModel('select')">选择🖱️</button>
-      <button @click="app.setModel('drawing')">铅笔✏️</button>
-      <button @click="app.setModel('rect')">矩形⬜️</button>
+      <button @click="app.setTool(selectTool)">选择🖱️</button>
+      <!-- <button @click="app.setModel('drawing')">铅笔✏️</button> -->
+      <button @click="app.setTool(rectTool)">矩形⬜️</button>
     </div>
     <div ref="containerRef" class="container"></div>
   </div>

packages/core/src/app.ts

@@ -1,18 +1,18 @@
 import { BaseService } from '@pictode/utils';
 import { fabric } from 'fabric';
 
-import { Rect } from './customs/rect';
-import { AppOption, ControlsOption, EventArgs, Model, Plugin, ToolStrategy } from './types';
+import { MouseService } from './services/mouse';
+import { AppOption, ControlsOption, EventArgs, Plugin, ToolStrategy } from './types';
 import { DEFAULT_APP_OPTION } from './utils';
 
 export class App extends BaseService<EventArgs> {
   public canvas: fabric.Canvas;
+  public mouseService: MouseService;
+  public currentTool: ToolStrategy | null = null;
 
-  private currentTool: ToolStrategy | null = null;
   private option: AppOption & { controls: ControlsOption };
   private installedPlugins: Map<string, Plugin> = new Map();
   private canvasEl: HTMLCanvasElement;
-  private curPointer: fabric.Point = new fabric.Point(0, 0);
 
   constructor(option?: AppOption) {
     super();
@@ -22,11 +22,11 @@ export class App extends BaseService<EventArgs> {
       backgroundColor: option?.backgroundColor,
     });
     this.setControls(this.option.controls);
-    this.canvas.on('mouse:move', ({ e }: fabric.IEvent<MouseEvent>) => {
-      const { x, y } = this.canvas.getPointer(e);
-      this.curPointer.setXY(x, y);
-      console.log('===>', x, y);
-    });
+    this.mouseService = new MouseService(this);
+  }
+
+  public get pointer(): fabric.Point {
+    return this.mouseService.pointer;
   }
 
   public mount(element: HTMLElement) {
@@ -35,10 +35,9 @@ export class App extends BaseService<EventArgs> {
       width: element.clientWidth,
       height: element.clientHeight,
     });
-    this.setModel('select');
   }
 
-  public setControls(controls: ControlsOption | boolean): App {
+  public setControls(controls: ControlsOption | boolean): void {
     this.option.controls = controls;
     if (typeof controls === 'boolean') {
       this.option.controls.hasControls = controls;
@@ -52,45 +51,10 @@ export class App extends BaseService<EventArgs> {
       }
     });
     this.render(true);
-    return this;
   }
 
-  public setTool(tool: ToolStrategy): App {
+  public setTool(tool: ToolStrategy): void {
     this.currentTool = tool;
-    return this;
-  }
-
-  public setModel(model: Model): App {
-    const rect = new Rect({
-      width: 200,
-      height: 100,
-      top: 20,
-      left: 20,
-      fill: 'transparent',
-      stroke: 'blue',
-      strokeWidth: 5,
-      rx: 5,
-      ry: 5,
-    });
-    switch (model) {
-      case 'select':
-        this.canvas.isDrawingMode = false;
-        this.canvas.selection = true;
-        this.canvas.selectionColor = 'rgba(157, 157, 231, 0.5)';
-        this.canvas.selectionBorderColor = 'rgb(157, 157, 231)';
-        this.canvas.selectionLineWidth = 2;
-        break;
-      case 'drawing':
-        this.canvas.isDrawingMode = true;
-        this.canvas.selection = false;
-        this.canvas.freeDrawingBrush.color = 'red';
-        this.canvas.freeDrawingBrush.width = 20;
-        break;
-      case 'rect':
-        this.canvas.add(rect);
-        break;
-    }
-    return this;
   }
 
   public render(asyncRedraw?: boolean): void {

packages/core/src/index.ts

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

packages/core/src/services/mouse.ts

@@ -54,14 +54,23 @@ export class MouseService extends Service {
 
   private onMouseDown(event: IMouseEvent): void {
     this.event = event.e;
+    if (this.app.currentTool) {
+      this.app.currentTool.onMouseDown(this.event);
+    }
   }
 
   private onMouseUp(event: IMouseEvent): void {
     this.event = event.e;
+    if (this.app.currentTool) {
+      this.app.currentTool.onMouseUp(this.event);
+    }
   }
 
   private onMouseMove(event: IMouseEvent): void {
     this.event = event.e;
+    if (this.app.currentTool) {
+      this.app.currentTool.onMouseMove(this.event);
+    }
   }
 
   private onMouseDoubleClick(event: IMouseEvent): void {

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

@@ -0,0 +1,41 @@
+import { Rect } from '../customs/rect';
+import { ToolStrategy } from '../types';
+
+export class RectTool extends ToolStrategy {
+  private isDrawing: boolean = false;
+  private rect: Rect | null = null;
+
+  public onMouseDown(): void {
+    this.isDrawing = true;
+    const pointer = this.app.pointer;
+    this.rect = new Rect({
+      left: pointer.x,
+      top: pointer.y,
+      width: 0,
+      height: 0,
+      fill: 'transparent',
+      stroke: 'black',
+      strokeWidth: 2,
+    });
+    this.app.canvas.add(this.rect);
+  }
+
+  public onMouseMove(): void {
+    if (!this.isDrawing || !this.rect) {
+      return;
+    }
+    const pointer = this.app.pointer;
+    this.rect.set({
+      width: pointer.x - (this.rect.left ?? 0),
+      height: pointer.y - (this.rect.top ?? 0),
+    });
+    this.app.render();
+  }
+
+  public onMouseUp(): void {
+    this.isDrawing = false;
+    this.rect = null;
+  }
+}
+
+export default RectTool;

packages/core/src/types.ts

@@ -35,8 +35,6 @@ export abstract class Service {
 
 export interface EventArgs {}
 
-export type Model = 'select' | 'drawing' | 'rect' | 'circle';
-
 export interface ControlVisible {
   bl?: boolean;
   br?: boolean;