1

src/renderer/src/components/whiteboard/whiteboard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="whiteboart-container" :style="{ height: height + 'px' }">
-    <div class="canvasBox" ref="box"></div>
+    <div class="canvasBox" ref="box" @mouseleave="handleMouseLeave" ></div>
 
     <div class="footerLeft" @click.stop
       :style="type == 'design' ? ['top: 10px', 'justify-content: space-between'] : ['bottom: 10px', 'justify-content: center']">
@@ -278,7 +278,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch, toRaw, nextTick, computed, reactive, defineProps, defineEmits } from 'vue'
+import { onMounted, ref, getCurrentInstance, watch, toRaw, nextTick, computed, reactive, defineProps, defineEmits } from 'vue'
 import TinyWhiteboard from 'whiteboard_lyc'
 import ColorPicker from './components/ColorPicker.vue'
 import {
@@ -305,6 +305,7 @@ import { fontFamilyList, fontSizeList } from './constants'
 
 const borderImg = new URL('../../../src/assets/images/borderwidth.png', import.meta.url).href
 const pointerImg = new URL('../../../src/assets/images/mouse-pointer.png', import.meta.url).href
+const { proxy } = getCurrentInstance()
 
 const props = defineProps({
   modelValue: {
@@ -713,6 +714,13 @@ watch(() => props.data, (newVal) => {
 
 // dom元素挂载完成
 onMounted(() => {
+  init();
+})
+
+/**
+ * 初始化画布内容
+ */
+const init = () => {
    // 创建实例
    app = new TinyWhiteboard({
     container: box.value,
@@ -781,7 +789,46 @@ onMounted(() => {
       app.resize()
     }, 300)
   })
-})
+}
+
+/**
+ * 课堂展示-鼠标离开白板监听事件：该事件是避免，选中状态，在其他地方点击、后退、删除等事件，会删除白板内选中的元素
+ */
+const handleMouseLeave = () => {
+  console.log('离开白板')
+  // 清除激活项
+  // app.cancelActiveElement()
+
+  const rect = proxy.$refs.box.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const selectedShape = this.shapes.find(shape => {
+        return x >= shape.x && x <= shape.x + shape.width && y >= shape.y && y <= shape.y + shape.height;
+      });
+      if (selectedShape) {
+        console.log('选中的元素:', selectedShape);
+      }
+ 
+  // 当前操作类型
+  // console.log("当前操作类型,默认 selection：", currentType.value)
+
+  // // 是否有 当前激活的元素？有则取消激活
+  // console.log("当前激活的元素：", activeElement.value)
+  // // if (activeElement.value) {
+  // //   console.log("取消激活")
+  // //   activeElement.value = null
+  // // }
+
+  // // // 是否有当前多选的元素？有则取消多选
+  // console.log("当前多选的元素：", selectedElements.value)
+  // if( selectedElements.value.length > 0) {
+  //   console.log("取消多选")
+  //   selectedElements.value = []
+  // }
+
+  // const canvas = box.value;
+  // canvas.blur(); // 失焦
+};
 
 // 暴露方法
 defineExpose({

src/renderer/src/views/classTask/newClassTaskAssign/index.vue

@@ -68,8 +68,7 @@
       </div>
       <div v-if="(currentRow.worktype == '课堂展示' || classWorkForm.worktype == '课堂展示') && currentRow.id>0" class="page-center">
         <div v-loading="boardLoading" class="board-wrap" style="height: 100%; flex: 1; overflow: hidden;">
-          <!-- <whiteboard v-if="isShowBoard" ref="boardref" :height="mainHeight - 150" :isShowSave="false" :data="whiteboardObj"/> -->
+          <whiteboard ref="boardref" height="100%" width="100%" :isShowSave="false" :data="classWorkForm.whiteboardObj" />
-          <whiteboard ref="boardref" height="100%" width="100%" :isShowSave="false" :data="classWorkForm.whiteboardObj"/>
         </div>
       </div>
       <div v-if="(currentRow.worktype == '常规作业' || classWorkForm.worktype == '常规作业')&& currentRow.id>0" class="page-center">