feat: 优化rectTool

JessYan0913 · Jul 24, 2023 · 765a7e1 · 765a7e1
1 parent f2f3238
commit 765a7e1
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 38 deletions.
diff --git a/main/src/view/canvas/index.vue b/main/src/view/canvas/index.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { App, RectTool, SelectTool } 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);

diff --git a/packages/core/src/customs/rect.ts b/packages/core/src/customs/rect.ts
@@ -1,36 +1,6 @@
 import { fabric } from 'fabric';
 
-const isTransparent = (color: string): boolean => {
-  return new fabric.Color(color).getAlpha() === 0;
-};
-
 export class Rect extends fabric.Rect {
-  public containsPoint(
-    point: fabric.Point,
-    lines?: any,
-    absolute?: boolean | undefined,
-    calculate?: boolean | undefined
-  ): boolean {
-    const activeObjects = this.canvas?.getActiveObjects();
-    const isFillTransparent = typeof this.fill === 'string' ? isTransparent(this.fill) : false;
-    if (isFillTransparent && !activeObjects?.includes(this)) {
-      const tolerance = 3;
-      const boundingRect = this.getBoundingRect();
-      const strokeWidth = this.strokeWidth || 1; // 边框宽度，默认为 1
-      const distanceToTop = Math.abs(point.y - boundingRect.top);
-      const distanceToBottom = Math.abs(point.y - boundingRect.top - boundingRect.height);
-      const distanceToLeft = Math.abs(point.x - boundingRect.left);
-      const distanceToRight = Math.abs(point.x - boundingRect.left - boundingRect.width);
-      const onBorder =
-        distanceToTop <= strokeWidth + tolerance ||
-        distanceToBottom <= strokeWidth + tolerance ||
-        distanceToLeft <= strokeWidth + tolerance ||
-        distanceToRight <= strokeWidth + tolerance;
-      return onBorder;
-    }
-    return super.containsPoint(point, lines, absolute, calculate);
-  }
-
   public _render(ctx: CanvasRenderingContext2D): void {
     super._render(ctx);
   }

diff --git a/packages/core/src/tools/rect-tool.ts b/packages/core/src/tools/rect-tool.ts
@@ -3,11 +3,14 @@ import { fabric } from 'fabric';
 import { Rect } from '../customs/rect';
 import { AppMouseEvent, ToolStrategy } from '../types';
 
-export class RectTool implements ToolStrategy {
+import { selectTool } from './select-tool';
+
+class RectTool implements ToolStrategy {
   private startPointer: fabric.Point = new fabric.Point(0, 0);
   private rectangle: Rect | null = null;
 
   public onMouseDown({ app }: AppMouseEvent): void {
+    app.canvas.selection = false;
     this.startPointer = app.pointer;
     this.rectangle = new Rect({
       left: this.startPointer.x,
@@ -33,9 +36,16 @@ export class RectTool implements ToolStrategy {
     app.render();
   }
 
-  public onMouseUp(): void {
+  public onMouseUp({ app }: AppMouseEvent): void {
+    // app.canvas.selection = true;
+    app.setTool(selectTool);
+    this.startPointer.setXY(0, 0);
+    this.rectangle && app.canvas.setActiveObject(this.rectangle);
+    app.render();
     this.rectangle = null;
   }
 }
 
-export default RectTool;
+export const rectTool = new RectTool();
+
+export default rectTool;
diff --git a/packages/core/src/tools/select-tool.ts b/packages/core/src/tools/select-tool.ts
@@ -1,6 +1,6 @@
 import { AppMouseEvent, ToolStrategy } from '../types';
 
-export class SelectTool implements ToolStrategy {
+class SelectTool implements ToolStrategy {
   public onMouseDown({ app }: AppMouseEvent): void {
     app.canvas.selection = true;
     app.canvas.isDrawingMode = false;
@@ -14,4 +14,6 @@ export class SelectTool implements ToolStrategy {
   public onMouseUp(): void {}
 }
 
-export default SelectTool;
+export const selectTool = new SelectTool();
+
+export default selectTool;
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
@@ -1,3 +1,5 @@
+import { fabric } from 'fabric';
+
 import { AppOption, ControlsOption } from '../types';
 
 export const DEFAULT_APP_OPTION: AppOption & { controls: ControlsOption } = {
@@ -14,3 +16,7 @@ export const DEFAULT_APP_OPTION: AppOption & { controls: ControlsOption } = {
     transparentCorners: true,
   },
 };
+
+export const isTransparent = (color: string): boolean => {
+  return new fabric.Color(color).getAlpha() === 0;
+};