工具栏-橡皮擦

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

@@ -777,7 +777,8 @@ export class TYPES {
     DRAW: 'draw',     // 画笔模式
     ERASE: 'erase',   // 橡皮擦模式
     SELECT: 'select', // 选择模式
-    Board: 'board'    // 画板模式
+    Board: 'board',   // 画板模式
+    OTHER: 'other',   // 其他模式
   }
   // 画笔类型
   static DrawType = {
@@ -1612,6 +1613,10 @@ export class fabricVue {
         objectSet.hoverCursor = undefined
         this.canvas.selection = true
         break
+      case TYPES.ActionMode.OTHER: // 其他(工具选择)
+        this.canvas.isDrawingMode = false
+        this.canvas.freeDrawingCursor = 'default'
+        break
       default:
         break
     }

src/renderer/src/utils/tool.js

@@ -69,9 +69,9 @@ export const createWindow = async (type, data) => {
         // parent: mainWin, // 父窗口
         // autoClose: true,    // 关闭窗口后自动关闭
       }
+      data.isConsole = true // 是否开启控制台
       data.option = {...defOption, ...option}
       const win = await toolWindow(data)
-      win.setTitle('窗口标题: 我的自定义参数')
       win.type = type  // 唯一标识
       win.show()
       win.setFullScreen(true) // 设置窗口为全屏
@@ -110,7 +110,7 @@ export const createWindow = async (type, data) => {
  * @author: zdg
  * @date 2021-07-05 14:07:01
  */
-export function toolWindow({url, isFile, isConsole, option={}}) {
+export function toolWindow({url, isConsole, option={}}) {
   // width = window.screen.width
   let width = option?.width || 800
   let height = option?.height || 600

src/renderer/src/views/tool/components/board.vue

@@ -4,24 +4,39 @@
 </template>
 <script setup>
 // 功能说明：画板
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watchEffect } from 'vue'
 import {FabricVue, TYPES} from '@/plugins/fabric'
-import { useBoardStore, useDrawStore } from '@/store/modules/draw'
-const canvasRef = ref(null)
+const canvasRef = ref(null) // 画布
+const isMouse = ref(true)  // 鼠标是否在画布上
 const props = defineProps({
   modelValue: String
 })
-
+// 画板初始化配置
 onMounted(async() => {
   if (canvasRef.value) {
-    // useBoardStore().backgroundColor = 'transparent'
-    // useDrawStore().drawColors = ['red']
     FabricVue.drawConfig.drawColors = ['red']
     FabricVue.boardConfig.backgroundColor = 'transparent'
     const option = { freeDrawingCursor: 'default' }
     await FabricVue.initCanvas(canvasRef.value, option)
   }
 })
+// 监听
+watchEffect(() => {
+  // console.log('board 画板: ', props.modelValue)
+  isMouse.value = false
+  switch(props.modelValue) {
+    case 'select':  // 选择模式
+      FabricVue.handleMode(TYPES.ActionMode.OTHER)
+      break
+    case 'brush':   // 画笔模式
+      FabricVue.handleMode(TYPES.ActionMode.DRAW)
+      FabricVue.canvas.freeDrawingCursor = 'default'
+      break
+    case 'eraser':  // 板擦模式
+      FabricVue.handleMode(TYPES.ActionMode.ERASE)
+      break
+  }
+})
 </script>
 <style lang="scss" scoped>
 </style>

src/renderer/src/views/tool/sphere.vue

@@ -42,12 +42,10 @@ const btnList = [
 
 // ==== 方法 ===
 const tabChange = (val) => { // 切换tab-change
-  console.log('xxxx', val)
   switch (val) {
-    case 'brush':
+    case 'brush': // 画笔
       break
-    case 'eraser':
-
+    case 'eraser': // 板擦
       break
     case 'interact':
       break