feat: 处理绘图相互影响问题

JessYan0913 · Jul 24, 2023 · fb8e5cb · fb8e5cb
1 parent de410f0
commit fb8e5cb
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/packages/core/src/tools/ellipse-tool.ts b/packages/core/src/tools/ellipse-tool.ts
@@ -10,6 +10,7 @@ class EllipseTool implements ToolStrategy {
   private ellipse: Ellipse | null = null;
 
   public onMouseDown({ app }: AppMouseEvent): void {
+    app.canvas.discardActiveObject();
     app.canvas.selection = false;
     this.startPointer = app.pointer;
     this.ellipse = new Ellipse({
@@ -25,6 +26,17 @@ class EllipseTool implements ToolStrategy {
   }
 
   public onMouseMove({ app }: AppMouseEvent): void {
+    const activeObject = app.canvas.getActiveObject();
+
+    app.canvas.forEachObject((obj) => {
+      if (obj !== activeObject) {
+        obj.set({
+          evented: false,
+        });
+      }
+    });
+
+    app.canvas.renderAll();
     if (!this.ellipse) {
       return;
     }
@@ -46,6 +58,11 @@ class EllipseTool implements ToolStrategy {
   }
 
   public onMouseUp({ app }: AppMouseEvent): void {
+    app.canvas.forEachObject((obj) => {
+      obj.set({
+        evented: true,
+      });
+    });
     app.setTool(selectTool);
     this.startPointer.setXY(0, 0);
     this.ellipse && app.canvas.setActiveObject(this.ellipse);

diff --git a/packages/core/src/tools/rect-tool.ts b/packages/core/src/tools/rect-tool.ts
@@ -10,6 +10,7 @@ class RectTool implements ToolStrategy {
   private rectangle: Rect | null = null;
 
   public onMouseDown({ app }: AppMouseEvent): void {
+    app.canvas.discardActiveObject();
     app.canvas.selection = false;
     this.startPointer = app.pointer;
     this.rectangle = new Rect({
@@ -25,6 +26,17 @@ class RectTool implements ToolStrategy {
   }
 
   public onMouseMove({ app }: AppMouseEvent): void {
+    const activeObject = app.canvas.getActiveObject();
+
+    app.canvas.forEachObject((obj) => {
+      if (obj !== activeObject) {
+        obj.set({
+          evented: false,
+        });
+      }
+    });
+
+    app.canvas.renderAll();
     if (!this.rectangle) {
       return;
     }
@@ -35,6 +47,11 @@ class RectTool implements ToolStrategy {
   }
 
   public onMouseUp({ app }: AppMouseEvent): void {
+    app.canvas.forEachObject((obj) => {
+      obj.set({
+        evented: true,
+      });
+    });
     app.setTool(selectTool);
     this.startPointer.setXY(0, 0);
     this.rectangle && app.canvas.setActiveObject(this.rectangle);