fix: pathText和freeDraw元素绘制时设置唯一id (#416)

ikuaitu · Jun 4, 2024 · 75f2f5c · 75f2f5c
1 parent 21df79d
commit 75f2f5c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/core/plugin/FreeDrawPlugin.ts b/packages/core/plugin/FreeDrawPlugin.ts
@@ -1,5 +1,6 @@
 import { fabric } from 'fabric';
 import Editor from '../Editor';
+import { v4 as uuid } from 'uuid';
 
 type IEditor = Editor;
 
@@ -12,14 +13,28 @@ export default class FreeDrawPlugin {
   static apis = ['startDraw', 'endDraw'];
   constructor(public canvas: fabric.Canvas, public editor: IEditor) {}
 
+  _bindEvent() {
+    this.canvas.on('path:created', this._createdHandler);
+  }
+
+  _unbindEvent() {
+    this.canvas.off('path:created', this._createdHandler);
+  }
+
+  _createdHandler = (opt: any) => {
+    opt.path.set('id', uuid());
+  };
+
   startDraw(options: DrawOptions) {
     this.canvas.isDrawingMode = true;
     this.canvas.freeDrawingBrush = new fabric.PencilBrush(this.canvas);
     this.canvas.freeDrawingBrush.width = options.width;
+    this._bindEvent();
   }
   endDraw() {
     if (this.canvas.isDrawingMode) {
       this.canvas.isDrawingMode = false;
+      this._unbindEvent();
       return;
     }
   }

diff --git a/packages/core/plugin/PathTextPlugin.ts b/packages/core/plugin/PathTextPlugin.ts
@@ -1,5 +1,6 @@
 import { fabric } from 'fabric';
 import Editor from '../Editor';
+import { v4 as uuid } from 'uuid';
 
 type IEditor = Editor;
 type DrawOptions = {
@@ -31,6 +32,7 @@ export default class PathTextPlugin {
       left: path.left,
       fill: this.options.color,
       path: path,
+      id: uuid(),
     });
     this.canvas.add(textObject);
   };