fix(component): 修复蒙版组建和插件状态不同步问题

Author: Qiu-Jun

README.md

@@ -268,15 +268,22 @@ pnpm dev
                     <sub><b>makeng</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/momo2019">
+                    <img src="https://avatars.githubusercontent.com/u/26078793?v=4" width="80;" alt="momo2019"/>
+                    <br />
+                    <sub><b>momo2019</b></sub>
+                </a>
+            </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/z09176141">
                     <img src="https://avatars.githubusercontent.com/u/49260613?v=4" width="80;" alt="z09176141"/>
                     <br />
                     <sub><b>z09176141</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/a847244052">
                     <img src="https://avatars.githubusercontent.com/u/28621500?v=4" width="80;" alt="a847244052"/>
@@ -312,21 +319,14 @@ pnpm dev
                     <sub><b>pengzhijian</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/JiangShuQ">
                     <img src="https://avatars.githubusercontent.com/u/95730895?v=4" width="80;" alt="JiangShuQ"/>
                     <br />
                     <sub><b>JiangShuQ</b></sub>
                 </a>
-            </td>
-		</tr>
-		<tr>
-            <td align="center">
-                <a href="https://github.com/momo2019">
-                    <img src="https://avatars.githubusercontent.com/u/26078793?v=4" width="80;" alt="momo2019"/>
-                    <br />
-                    <sub><b>momo2019</b></sub>
-                </a>
             </td>
             <td align="center">
                 <a href="https://github.com/hudenghui">

packages/core/plugin/MaskPlugin.ts

@@ -12,7 +12,7 @@ type IEditor = Editor;
 
 class MaskPlugin implements IPluginTempl {
   static pluginName = 'MaskPlugin';
-  static apis = ['setCoverMask', 'workspaceMaskToggle'];
+  static apis = ['setCoverMask', 'workspaceMaskToggle', 'getworkspaceMaskStatus'];
   coverMask: null | fabric.Rect = null;
   workspace: null | fabric.Rect = null;
   workspaceEl!: HTMLElement;
@@ -42,11 +42,18 @@ class MaskPlugin implements IPluginTempl {
       workspaceMask && this.canvas.remove(workspaceMask);
       this.workspace?.clone((cloned: fabric.Rect) => {
         this.canvas.clipPath = cloned;
+        this.coverMask = null;
         this.canvas.requestRenderAll();
       });
       this.editor.off('loadJson', this.initMask);
     }
   }
+  /**
+   * @desc 获取蒙版开关
+   */
+  getworkspaceMaskStatus() {
+    return this.coverMask !== null;
+  }
 
   /**
    * @desc 获取蒙版

src/components/workspaceMask.vue

@@ -22,6 +22,10 @@ const openMask = ref(false);
 const onMaskChange = () => {
   canvasEditor?.workspaceMaskToggle();
 };
+
+onMounted(() => {
+  openMask.value = canvasEditor?.getworkspaceMaskStatus();
+});
 </script>
 
 <style lang="less" scoped>