feat(plugin): 添加mask插件开关

Author: Qiu-Jun

.eslintrc-auto-import.json

@@ -64,4 +64,4 @@
     "watchPostEffect": true,
     "watchSyncEffect": true
   }
-}
+}

packages/core/plugin/MaskPlugin.ts

@@ -27,7 +27,6 @@ class MaskPlugin implements IPluginTempl {
       throw new Error('element #workspace is missing, plz check!');
     }
     this.workspaceEl = workspaceEl;
-    this.workspaceMaskToggle();
   }
 
   /**
@@ -36,17 +35,16 @@ class MaskPlugin implements IPluginTempl {
    */
   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.workspace?.clone((cloned: fabric.Rect) => {
         this.canvas.clipPath = cloned;
         this.canvas.requestRenderAll();
       });
+      this.editor.off('loadJson', this.initMask);
     }
   }
 

packages/core/plugin/WorkspacePlugin.ts

@@ -13,7 +13,7 @@ type IEditor = Editor;
 
 class WorkspacePlugin implements IPluginTempl {
   static pluginName = 'WorkspacePlugin';
-  static events = ['sizeChange', 'zoomChange'];
+  static events = ['sizeChange'];
   static apis = [
     'big',
     'small',
@@ -148,69 +148,6 @@ class WorkspacePlugin implements IPluginTempl {
     this.auto();
   }
 
-  setCoverMask(hack = false) {
-    if (!this.coverMask || !this.workspace) {
-      return;
-    }
-    const center = this.canvas.getCenter();
-    const zoom = this.canvas.getZoom();
-    this.canvas.zoomToPoint(
-      new fabric.Point(center.left, center.top),
-      hack ? zoom - 0.0000001 : zoom // 比较hack的方法，判断为fabric内部的数据更新问题
-    );
-    if (zoom) {
-      const { workspaceEl } = this;
-      const width = workspaceEl.offsetWidth;
-      const height = workspaceEl.offsetHeight;
-      const cWidth = width / zoom;
-      const cHeight = height / zoom;
-      this.coverMask.width = cWidth;
-      this.coverMask.height = cHeight;
-      this.coverMask.left = (this.workspace.left || 0) + (this.workspace.width! - cWidth) / 2;
-      this.coverMask.top = (this.workspace.top || 0) + (this.workspace.height! - cHeight) / 2;
-      this.workspace.clone((clone: fabric.Rect) => {
-        clone.left = -clone.width! / 2;
-        clone.top = -clone.height! / 2;
-        clone.inverted = true;
-        this.coverMask!.objectCaching = false;
-        this.coverMask!.clipPath = clone;
-        this.canvas.requestRenderAll();
-      });
-    }
-  }
-
-  clipPath() {
-    if (this.coverMask) {
-      return;
-    }
-    // 超出画布不展示
-    this.workspace?.clone((cloned: fabric.Rect) => {
-      this.canvas.clipPath = cloned;
-      this.canvas.requestRenderAll();
-    });
-  }
-
-  maskEnable(needBindLoadJSON = true) {
-    const coverMask = new fabric.Rect({
-      fill: 'rgba(0,0,0,0.7)',
-      id: 'coverMask',
-      strokeWidth: 0,
-    });
-    coverMask.set('selectable', false);
-    coverMask.set('hasControls', false);
-    coverMask.set('evented', false);
-    coverMask.hoverCursor = 'default';
-    this.canvas.on('object:added', () => {
-      coverMask.bringToFront();
-    });
-    this.canvas.clipPath = undefined;
-    this.canvas.add(coverMask);
-    this.coverMask = coverMask;
-    this.setCoverMask();
-    // 适配模板和psd的loadjson，在加载完成后再入mask
-    needBindLoadJSON && this.editor.on('loadJson', () => this.maskEnable(false));
-  }
-
   setZoomAuto(scale: number, cb?: (left?: number, top?: number) => void) {
     const { workspaceEl } = this;
     const width = workspaceEl.offsetWidth;
@@ -222,8 +159,7 @@ class WorkspacePlugin implements IPluginTempl {
     this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), scale);
     if (!this.workspace) return;
     this.setCenterFromObject(this.workspace);
-    // console.log(this.editor, this.canvas)
-    // this.editor &&  this.editor?.workspaceMaskToggle();
+    this.editor.getPlugin('MaskPlugin') && this.editor?.setCoverMask(true);
 
     if (cb) cb(this.workspace.left, this.workspace.top);
   }
@@ -281,25 +217,13 @@ class WorkspacePlugin implements IPluginTempl {
       const center = this.canvas.getCenter();
       this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), zoom);
 
-      // this.editor && this.editor?.workspaceMaskToggle()
+      this.editor.getPlugin('MaskPlugin') && this.editor?.setCoverMask(true);
 
       opt.e.preventDefault();
       opt.e.stopPropagation();
     });
   }
 
-  clipPathOrRefreshMask() {
-    if (this.editor.getPlugin('MaskPlugin')) {
-      this.editor.setCoverMask(true);
-    } else {
-      // 超出画布不展示
-      this.workspace?.clone((cloned: fabric.Rect) => {
-        this.canvas.clipPath = cloned;
-        this.canvas.requestRenderAll();
-      });
-    }
-  }
-
   destroy() {
     this.resizeObserver.disconnect();
     this.canvas.off();

src/components/bgBar.vue

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

src/components/workspaceMask.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="mask-wrap">
+    <div>开启背景蒙版</div>
+
+    <iSwitch v-model="openMask" size="large" @on-change="onMaskChange">
+      <template #open>
+        <span>开启</span>
+      </template>
+      <template #close>
+        <span>关闭</span>
+      </template>
+    </iSwitch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import useSelect from '@/hooks/select';
+
+const { canvasEditor }: any = useSelect();
+
+const openMask = ref(false);
+const onMaskChange = () => {
+  canvasEditor?.workspaceMaskToggle();
+};
+</script>
+
+<style lang="less" scoped>
+.mask-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>