feat(core): 添加蒙层插件冲突处理

Author: momo2019

packages/core/index.ts

@@ -20,6 +20,7 @@ export { default as DrawLinePlugin } from './plugin/DrawLinePlugin';
 export { default as GroupTextEditorPlugin } from './plugin/GroupTextEditorPlugin';
 export { default as GroupAlignPlugin } from './plugin/GroupAlignPlugin';
 export { default as WorkspacePlugin } from './plugin/WorkspacePlugin';
+export { default as MaskPlugin } from './plugin/MaskPlugin';
 export { default as HistoryPlugin } from './plugin/HistoryPlugin';
 export { default as FlipPlugin } from './plugin/FlipPlugin';
 export { default as RulerPlugin } from './plugin/RulerPlugin';

packages/core/plugin/MaskPlugin.ts

@@ -0,0 +1,103 @@
+/*
+ * @Author: MOmo
+ * @Date: 2024-07-12 15:10:02
+ * @LastEditors: MOmo
+ * @LastEditTime: 2024-07-12 15:15:45
+ * @Description: 画布蒙层插件
+ */
+
+import { fabric } from 'fabric';
+import Editor from '../Editor';
+type IEditor = Editor;
+
+class MaskPlugin implements IPluginTempl {
+  static pluginName = 'MaskPlugin';
+  static apis = ['setCoverMask'];
+  coverMask: null | fabric.Rect = null;
+  workspace: null | fabric.Rect = null;
+  workspaceEl!: HTMLElement;
+  hackFlag = false;
+
+  constructor(public canvas: fabric.Canvas, public editor: IEditor) {
+    this.init();
+  }
+
+  private init() {
+    const workspaceEl = document.querySelector('#workspace') as HTMLElement;
+    if (!workspaceEl) {
+      throw new Error('element #workspace is missing, plz check!');
+    }
+    this.workspaceEl = workspaceEl;
+    this.initMask();
+  }
+
+  // 返回workspace对象
+  getWorkspase() {
+    return this.canvas.getObjects().find((item) => item.id === 'workspace') as fabric.Rect;
+  }
+
+  setCoverMask(hack = false) {
+    if (!this.coverMask || !this.workspace) {
+      return;
+    }
+    const center = this.canvas.getCenter();
+    const zoom = this.canvas.getZoom();
+    let zoomToPointNumber = zoom;
+    if (hack) {
+      // 比较hack的方法，判断为fabric内部的数据更新问题
+      zoomToPointNumber += 0.0000001 * (this.hackFlag ? 1 : -1);
+      this.hackFlag = !this.hackFlag;
+    }
+
+    this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), zoomToPointNumber);
+    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!.clipPath = clone;
+        this.canvas.requestRenderAll();
+      });
+    }
+  }
+
+  initMask(needBindLoadJSON = true) {
+    this.workspace = this.getWorkspase();
+    if (!this.workspace) {
+      throw new Error('MaskPlugin must be used after WorkspacePlugin!');
+    }
+    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.initMask(false));
+  }
+
+  destroy() {
+    console.log('pluginDestroy');
+  }
+}
+
+export default MaskPlugin;

packages/core/plugin/ResizePlugin.ts

@@ -204,8 +204,7 @@ class ResizePlugin implements IPluginTempl {
       }
 
       this.editor.setCenterFromObject(workspace);
-      (this.editor.getPlugin('WorkspacePlugin') as WorkspacePlugin).setCoverMask(true);
-      (this.editor.getPlugin('WorkspacePlugin') as WorkspacePlugin).clipPath();
+
       if (['left', 'right'].includes(type)) {
         this.canvas.defaultCursor = 'ew-resize';
       } else {

packages/core/plugin/WorkspacePlugin.ts

@@ -13,7 +13,7 @@ type IEditor = Editor;
 
 class WorkspacePlugin implements IPluginTempl {
   static pluginName = 'WorkspacePlugin';
-  static events = ['sizeChange'];
+  static events = ['sizeChange', 'zoomChange'];
   static apis = [
     'big',
     'small',
@@ -51,6 +51,7 @@ class WorkspacePlugin implements IPluginTempl {
     this._initWorkspace();
     this._initResizeObserve();
     this._bindWheel();
+    this._bindSizeChange();
   }
 
   hookImportAfter() {
@@ -61,7 +62,6 @@ class WorkspacePlugin implements IPluginTempl {
         workspace.set('hasControls', false);
         workspace.set('evented', false);
         this.setSize(workspace.width, workspace.height);
-        this.editor.emit('sizeChange', workspace.width, workspace.height);
       }
       resolve('');
     });
@@ -223,8 +223,9 @@ class WorkspacePlugin implements IPluginTempl {
     this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), scale);
     if (!this.workspace) return;
     this.setCenterFromObject(this.workspace);
-    this.setCoverMask();
-    this.clipPath();
+
+    this.editor.emit('zoomChange');
+
     if (cb) cb(this.workspace.left, this.workspace.top);
   }
 
@@ -280,12 +281,31 @@ class WorkspacePlugin implements IPluginTempl {
       if (zoom < 0.01) zoom = 0.01;
       const center = this.canvas.getCenter();
       this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), zoom);
-      this.setCoverMask();
+
+      this.editor.emit('zoomChange');
+
       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();
+      });
+    }
+  }
+
+  private _bindSizeChange() {
+    this.editor.on('sizeChange', () => this.clipPathOrRefreshMask());
+    this.editor.on('zoomChange', () => this.clipPathOrRefreshMask());
+  }
+
   destroy() {
     this.resizeObserver.disconnect();
     this.canvas.off();

src/views/home/index.vue

@@ -274,6 +274,7 @@ import Editor, {
   ResizePlugin,
   LockPlugin,
   AddBaseTypePlugin,
+  MaskPlugin,
 } from '@kuaitu/core';
 import Edit from '@/components/edit.vue';
 import ClipImage from '@/components/clipImage.vue';
@@ -391,7 +392,7 @@ onMounted(() => {
   canvasEditor.use(ResizePlugin);
   canvasEditor.use(LockPlugin);
   canvasEditor.use(AddBaseTypePlugin);
-  canvasEditor.getPlugin('WorkspacePlugin').maskEnable();
+  canvasEditor.use(MaskPlugin);
 
   state.show = true;
   // 默认打开标尺