fix(plugin): 注释蒙版操作

Author: Qiu-Jun

.eslintrc-auto-import.json

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

packages/core/plugin/LayerPlugin.ts

@@ -16,24 +16,12 @@ class LayerPlugin implements IPluginTempl {
   constructor(public canvas: fabric.Canvas, public editor: IEditor) {}
 
   _getWorkspace() {
-    const result: Record<'workspace' | 'coverMask', fabric.Object | null> = {
-      workspace: null,
-      coverMask: null,
-    };
-    this.canvas.getObjects().forEach((item) => {
-      if (item.id === 'workspace') {
-        result.workspace = item;
-      } else if (item.id === 'coverMask') {
-        result.coverMask = item;
-      }
-    });
-    return result;
+    return this.canvas.getObjects().find((item) => item.id === 'workspace');
   }
 
   _workspaceSendToBack() {
     const workspace = this._getWorkspace();
-    workspace.workspace && workspace.workspace.sendToBack();
-    workspace.coverMask && workspace.coverMask.bringToFront();
+    workspace && workspace.sendToBack();
   }
 
   up() {

packages/core/plugin/ResizePlugin.ts

@@ -10,7 +10,6 @@ import { fabric } from 'fabric';
 import Editor from '../Editor';
 import { throttle } from 'lodash-es';
 import '../styles/resizePlugin.css';
-import WorkspacePlugin from './WorkspacePlugin';
 
 type IEditor = Editor;
 
@@ -204,7 +203,10 @@ class ResizePlugin implements IPluginTempl {
       }
 
       this.editor.setCenterFromObject(workspace);
-
+      workspace.clone((cloned: fabric.Rect) => {
+        this.canvas.clipPath = cloned;
+        this.canvas.requestRenderAll();
+      });
       if (['left', 'right'].includes(type)) {
         this.canvas.defaultCursor = 'ew-resize';
       } else {

packages/core/plugin/WorkspacePlugin.ts

@@ -27,7 +27,6 @@ class WorkspacePlugin implements IPluginTempl {
   workspaceEl!: HTMLElement;
   workspace: null | fabric.Rect;
   resizeObserver!: ResizeObserver;
-  coverMask: null | fabric.Rect = null;
   option: any;
   zoomRatio: number;
   constructor(public canvas: fabric.Canvas, public editor: IEditor) {
@@ -61,6 +60,7 @@ 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('');
     });
@@ -159,8 +159,12 @@ 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.getPlugin('MaskPlugin') && this.editor?.setCoverMask(true);
 
+    // 超出画布不展示
+    this.workspace.clone((cloned: fabric.Rect) => {
+      this.canvas.clipPath = cloned;
+      this.canvas.requestRenderAll();
+    });
     if (cb) cb(this.workspace.left, this.workspace.top);
   }
 
@@ -208,17 +212,14 @@ class WorkspacePlugin implements IPluginTempl {
   }
 
   _bindWheel() {
-    this.canvas.on('mouse:wheel', (opt) => {
+    this.canvas.on('mouse:wheel', function (this: fabric.Canvas, opt) {
       const delta = opt.e.deltaY;
-      let zoom = this.canvas.getZoom();
+      let zoom = this.getZoom();
       zoom *= 0.999 ** delta;
       if (zoom > 20) zoom = 20;
       if (zoom < 0.01) zoom = 0.01;
-      const center = this.canvas.getCenter();
-      this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), zoom);
-
-      this.editor.getPlugin('MaskPlugin') && this.editor?.setCoverMask(true);
-
+      const center = this.getCenter();
+      this.zoomToPoint(new fabric.Point(center.left, center.top), zoom);
       opt.e.preventDefault();
       opt.e.stopPropagation();
     });

src/components/bgBar.vue

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