From b4e78679225506ffdc2e825966b6fefbcb758f5b Mon Sep 17 00:00:00 2001
From: zdg <zdg@163.com>
Date: Wed, 31 Jul 2024 11:23:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/public/imgs/erase.svg       |  3 ++
 src/renderer/src/plugins/fabric/index.js |  5 ++-
 src/renderer/src/views/tool/test.vue     | 47 ++++++++++++++++++++++--
 3 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 src/renderer/public/imgs/erase.svg

diff --git a/src/renderer/public/imgs/erase.svg b/src/renderer/public/imgs/erase.svg
new file mode 100644
index 0000000..a746074
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/renderer/src/plugins/fabric/index.js b/src/renderer/src/plugins/fabric/index.js
index cb16fb9..4d6926b 100644
--- a/src/renderer/src/plugins/fabric/index.js
+++ b/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
 
diff --git a/src/renderer/src/views/tool/test.vue b/src/renderer/src/views/tool/test.vue
index d49b599..1deb706 100644
--- a/src/renderer/src/views/tool/test.vue
+++ b/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>