增加橡皮檫功能

packages/core/plugin/WorkspacePlugin.ts

@@ -79,7 +79,9 @@ class WorkspacePlugin implements IPluginTempl {
       height,
       id: 'workspace',
       strokeWidth: 0,
+      erasable: false,
     });
+
     workspace.set('selectable', false);
     workspace.set('hasControls', false);
     workspace.hoverCursor = 'default';

src/components/erase.vue

@@ -0,0 +1,49 @@
+<!--
+ * @Author: AliceLanniste
+ * @Date: 2024-06-26 10：05
+ * @Description: 橡皮檫功能呢
+-->
+
+<template>
+  <Tooltip :content="$t('erase')">
+    <Button long @click="doErase" type="text">
+      <svg
+        t="1719383882631"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="1448"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="14"
+        height="14"
+      >
+        <path
+          d="M667.257905 139.873524l3.85219 3.632762 252.903619 254.537143a73.142857 73.142857 0 0 1 0 103.107047L604.501333 822.686476H828.952381v73.142857H266.532571l-172.129523-173.226666a73.142857 73.142857 0 0 1 0-103.131429L567.344762 143.530667a73.142857 73.142857 0 0 1 99.913143-3.632762zM227.181714 589.604571L146.285714 671.036952l150.674286 151.649524h163.303619l-233.081905-233.081905zM619.227429 195.047619L278.747429 537.721905l253.70819 253.70819 339.675429-341.820952L619.227429 195.047619z"
+          p-id="1449"
+        ></path>
+      </svg>
+    </Button>
+  </Tooltip>
+</template>
+
+<script setup name="Erase">
+import useSelect from '@/hooks/select';
+import { fabric } from 'fabric';
+import 'fabric-eraser-brush';
+
+const { mixinState, canvasEditor } = useSelect();
+const isErase = ref(false);
+
+const doErase = () => {
+  isErase.value = !isErase.value;
+  let canvas = canvasEditor.canvas;
+  if (isErase.value) {
+    canvas.isDrawingMode = true;
+    canvas.freeDrawingBrush = new fabric.EraserBrush(canvas);
+    canvas.freeDrawingBrush.width = 15;
+  } else {
+    canvas.isDrawingMode = false;
+  }
+};
+</script>

src/language/zh.json

@@ -33,6 +33,7 @@
     }
   },
   "color": "颜色",
+  "erase": "橡皮檫",
   "textFloat": "小数",
   "templates": "模板",
   "elements": "元素",
@@ -254,4 +255,4 @@
   },
   "mine": "我的",
   "batch": "批量"
-}
+}

src/views/home/index.vue

@@ -23,6 +23,8 @@
           <Divider type="vertical" />
 
           <myTemplName></myTemplName>
+          <erase></erase>
+          <Divider type="vertical" />
           <!-- 标尺开关 -->
           <Tooltip :content="$t('grid')">
             <iSwitch
@@ -199,6 +201,7 @@ import group from '@/components/group.vue';
 import zoom from '@/components/zoom.vue';
 import dragMode from '@/components/dragMode.vue';
 import lock from '@/components/lock.vue';
+import erase from '@/components/erase.vue';
 import dele from '@/components/del.vue';
 import waterMark from '@/components/waterMark.vue';
 import login from '@/components/login';

typings/extends.d.ts

@@ -97,4 +97,12 @@ declare namespace fabric {
   export interface StaticCanvas {
     ruler: InstanceType<typeof CanvasRuler>;
   }
+
+  export class EraserBrush {
+    constructor(canvas: Canvas);
+  }
+
+  export interface IRectOptions {
+    [key: string]: unknown;
+  }
 }