src/renderer/public/imgs/erase.svg

@@ -0,0 +1,3 @@
+    <svg style="fill: currentColor;color: #ccc;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1023 366.1L662.3 5.2 585 82.6l-34.4-34.4L69.7 538l34.4 34.4-51.5 34.4c-68.7 68.7-68.7 171.9 0 240.6l120.2 120.3c68.7 68.7 171.8 68.7 240.5 0l42.9-43 34.4 34.4 489.5-489.8-34.4-25.8 77.3-77.4zM662.3 65.4l300.6 300.8-51.5 51.6-300.6-309.5 51.5-42.9zM404.7 924.7c-60.1 60.2-154.6 60.2-214.7 0l-94.5-94.5c-60.1-60.2-60.1-154.7 0-214.8l34.4-17.2L430.5 899l-25.8 25.7z" />
+    </svg>

src/renderer/src/plugins/fabric/index.js

@@ -624,7 +624,7 @@ export class History {
     const canvas = this.FabricVue?.canvas
     if (canvas) {
       this.diffs = this.diffs.slice(0, this.index)
-      const canvasJson = Utils.getCanvasJSON()
+      const canvasJson = Utils.getCanvasJSON(canvas)
       const delta = diff(canvasJson, this.canvasData)
       this.diffs.push(delta)
 
@@ -686,7 +686,7 @@ export class History {
   initHistory() {
     const canvas = this.FabricVue.canvas
     if (canvas) {
-      const canvasJson = Utils.getCanvasJSON()
+      const canvasJson = Utils.getCanvasJSON(canvas)
       this.canvasData = canvasJson
       this.index = 0
       this.diffs = []
@@ -1010,4 +1010,5 @@ export class fabricVue {
 }
 export const FabricVue = new fabricVue()
 export default FabricVue
+export const Fabric = fabric
 

src/renderer/src/views/tool/test.vue

@@ -1,6 +1,9 @@
 <template>
   <canvas ref="canvasRef" />
-  <button @click="eraseTo">橡皮擦</button>
+  <button @click="eraseTo">橡皮擦
+    <i class="iconfont icon-xiangpica"></i>
+    <img src="/imgs/erase.svg" alt="" srcset="">
+  </button>
 </template>
 
 <script setup>
@@ -8,7 +11,7 @@
 import { ref, onMounted } from 'vue'
 // import { FabricVue } from '@/plugins/fabric'
 // import { useBoardStore } from '@/store/modules/draw'
-import {FabricVue, TYPES} from '@/plugins/fabric'
+import {Fabric,FabricVue, TYPES} from '@/plugins/fabric'
 let canvasRef = ref(null)
 
 onMounted(async() => {
@@ -21,12 +24,48 @@ onMounted(async() => {
     // FabricVue.canvas.setHeight(500)
     FabricVue.drawConfig.drawColors = ['red']
     await FabricVue.initCanvas(canvasRef.value, option)
-    // const pencilBrush = new fabric.PencilBrush(canvas)
+
-    // FabricVue.canvas.isDrawingMode = true
   }
 })
 const eraseTo = () => { // 橡皮擦
   FabricVue.handleMode(TYPES.ActionMode.ERASE)
+  const brush = FabricVue.canvas.freeDrawingBrush
+  console.log('brush', brush)
+  // FabricVue.canvas.freeDrawingCursor = `url(/imgs/erase.svg),crosshair `
+  let tempRect
+  FabricVue.canvas.on('mouse:down', (e) => {
+    })
+  FabricVue.canvas.on('mouse:move', (e) => {
+    
+    if (tempRect) {
+      tempRect.set({
+        left: e.pointer.x - brush.width/2,
+        top: e.pointer.y - brush.width/2,
+      })
+      FabricVue.canvas.renderAll()
+    } else {
+      tempRect = new Fabric.Rect({
+        left: e.pointer.x - brush.width/2,
+        top: e.pointer.y - brush.width/2,
+        width: brush.width,
+        height: brush.width,
+        fill: 'transparent',
+        stroke: 'red',
+        strokeWidth: 1,
+        hasControls: false,
+        hasBorders: false,
+        selectable: false,
+        evented: false
+      })
+      FabricVue.canvas.add(tempRect)
+    }
+  })
+  FabricVue.canvas.on('mouse:up', (e) => {
+    if (tempRect) {
+      FabricVue.canvas.remove(tempRect);
+      tempRect = null;
+    }
+  })
 }
 
 </script>