feat(components): 添加蒙版开关

Author: Qiu-Jun

packages/core/plugin/MaskPlugin.ts

@@ -12,12 +12,11 @@ type IEditor = Editor;
 
 class MaskPlugin implements IPluginTempl {
   static pluginName = 'MaskPlugin';
-  static apis = ['setCoverMask'];
+  static apis = ['setCoverMask', 'workspaceMaskToggle'];
   coverMask: null | fabric.Rect = null;
   workspace: null | fabric.Rect = null;
   workspaceEl!: HTMLElement;
   hackFlag = false;
-
   constructor(public canvas: fabric.Canvas, public editor: IEditor) {
     this.init();
   }
@@ -28,7 +27,35 @@ class MaskPlugin implements IPluginTempl {
       throw new Error('element #workspace is missing, plz check!');
     }
     this.workspaceEl = workspaceEl;
-    this.initMask();
+    this.workspaceMaskToggle();
+  }
+
+  /**
+   * @desc 蒙版开关
+   * @param val Boolean false
+   */
+  workspaceMaskToggle() {
+    const workspaceMask = this.getWorkspaceMask();
+    console.log('是睡觉觉睡觉觉睡觉觉', workspaceMask);
+    if (!workspaceMask) {
+      this.initMask();
+    } else {
+      const workspace = this.getWorkspase();
+      // 如果有 则删除
+      workspaceMask && this.canvas.remove(workspaceMask);
+      workspace?.clone((cloned: fabric.Rect) => {
+        this.canvas.clipPath = cloned;
+        this.canvas.requestRenderAll();
+      });
+    }
+  }
+
+  /**
+   * @desc 获取蒙版
+   * @returns Object
+   */
+  getWorkspaceMask() {
+    return this.canvas.getObjects().find((item) => item.id === 'coverMask') as fabric.Rect;
   }
 
   // 返回workspace对象
@@ -76,7 +103,7 @@ class MaskPlugin implements IPluginTempl {
       throw new Error('MaskPlugin must be used after WorkspacePlugin!');
     }
     const coverMask = new fabric.Rect({
-      fill: 'rgba(0,0,0,0.7)',
+      fill: 'rgba(0,0,0,0.5)',
       id: 'coverMask',
       strokeWidth: 0,
     });

packages/core/plugin/WorkspacePlugin.ts

@@ -51,7 +51,6 @@ class WorkspacePlugin implements IPluginTempl {
     this._initWorkspace();
     this._initResizeObserve();
     this._bindWheel();
-    this._bindSizeChange();
   }
 
   hookImportAfter() {
@@ -223,8 +222,8 @@ class WorkspacePlugin implements IPluginTempl {
     this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), scale);
     if (!this.workspace) return;
     this.setCenterFromObject(this.workspace);
-
-    this.editor.emit('zoomChange');
+    // console.log(this.editor, this.canvas)
+    // this.editor &&  this.editor?.workspaceMaskToggle();
 
     if (cb) cb(this.workspace.left, this.workspace.top);
   }
@@ -282,7 +281,7 @@ class WorkspacePlugin implements IPluginTempl {
       const center = this.canvas.getCenter();
       this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), zoom);
 
-      this.editor.emit('zoomChange');
+      // this.editor && this.editor?.workspaceMaskToggle()
 
       opt.e.preventDefault();
       opt.e.stopPropagation();
@@ -301,11 +300,6 @@ class WorkspacePlugin implements IPluginTempl {
     }
   }
 
-  private _bindSizeChange() {
-    this.editor.on('sizeChange', () => this.clipPathOrRefreshMask());
-    this.editor.on('zoomChange', () => this.clipPathOrRefreshMask());
-  }
-
   destroy() {
     this.resizeObserver.disconnect();
     this.canvas.off();

src/components/bgBar.vue

@@ -23,10 +23,19 @@
         </template>
       </div>
     </div>
+
+    <div>
+      <Divider plain orientation="left">
+        <h4>蒙版</h4>
+      </Divider>
+
+      <workspaceMaskVue />
+    </div>
   </div>
 </template>
 
 <script setup name="BgBar">
+import workspaceMaskVue from './workspaceMask.vue';
 import { ref } from 'vue';
 import useSelect from '@/hooks/select';
 const { mixinState, canvasEditor } = useSelect();