From 7ea0fd42860aeb649ed766753efc5cccd51ddddc Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 23 Mar 2022 21:57:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=94=BB=E7=AC=94=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E9=87=8D=E6=9E=84=EF=BC=8C=E5=A2=A8=E8=BF=B9=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E5=B1=8F=E5=B9=95=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WritingBoard.vue       | 67 ++++++++++++++++++++-------
 src/views/Screen/WritingBoardTool.vue | 28 ++++++++++-
 src/views/Screen/index.vue            |  7 ++-
 3 files changed, 81 insertions(+), 21 deletions(-)

diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue
index 3d320256..9d01fde2 100644
--- a/src/components/WritingBoard.vue
+++ b/src/components/WritingBoard.vue
@@ -3,6 +3,10 @@
     <div class="blackboard" v-if="blackboard"></div>
 
     <canvas class="canvas" ref="canvasRef"
+      :style="{
+        width: canvasWidth + 'px',
+        height: canvasHeight + 'px',
+      }"
       @mousedown="$event => handleMousedown($event)"
       @mousemove="$event => handleMousemove($event)"
       @mouseup="handleMouseup()"
@@ -37,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
+import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
 
 const penSize = 6
 const rubberSize = 80
@@ -86,6 +90,25 @@ export default defineComponent({
     // 鼠标是否处在画布范围内：处在范围内才会显示画笔或橡皮
     const mouseInCanvas = ref(false)
 
+    // 监听更新canvas尺寸
+    const canvasWidth = ref(0)
+    const canvasHeight = ref(0)
+
+    const widthScale = computed(() => canvasRef.value ? canvasWidth.value / canvasRef.value.width : 1)
+    const heightScale = computed(() => canvasRef.value ? canvasHeight.value / canvasRef.value.height : 1)
+
+    const updateCanvasSize = () => {
+      if (!writingBoardRef.value) return
+      canvasWidth.value = writingBoardRef.value.clientWidth
+      canvasHeight.value = writingBoardRef.value.clientHeight
+    }
+    const resizeObserver = new ResizeObserver(updateCanvasSize)
+    onMounted(() => {
+      if (writingBoardRef.value) resizeObserver.observe(writingBoardRef.value)
+    })
+    onUnmounted(() => {
+      if (writingBoardRef.value) resizeObserver.unobserve(writingBoardRef.value)
+    })
 
     // 初始化画布
     const initCanvas = () => {
@@ -97,9 +120,6 @@ export default defineComponent({
       canvasRef.value.width = writingBoardRef.value.clientWidth
       canvasRef.value.height = writingBoardRef.value.clientHeight
 
-      canvasRef.value.style.width = writingBoardRef.value.clientWidth + 'px'
-      canvasRef.value.style.height = writingBoardRef.value.clientHeight + 'px'
-
       ctx.lineCap = 'round'
       ctx.lineJoin = 'round'
     }
@@ -197,28 +217,40 @@ export default defineComponent({
       lastTime = new Date().getTime()
     }
 
+    // 获取鼠标在canvas中的相对位置
+    const getMouseOffsetPosition = (e: MouseEvent | TouchEvent) => {
+      if (!canvasRef.value) return [0, 0]
+      const event = e instanceof MouseEvent ? e : e.changedTouches[0]
+      const canvasRect = canvasRef.value.getBoundingClientRect()
+      const x = event.pageX - canvasRect.x
+      const y = event.pageY - canvasRect.y
+      return [x, y]
+    }
+
     // 处理鼠标（触摸）事件
     // 准备开始绘制/擦除墨迹（落笔）
     const handleMousedown = (e: MouseEvent | TouchEvent) => {
-      const x = e instanceof MouseEvent ? e.offsetX : e.changedTouches[0].pageX
-      const y = e instanceof MouseEvent ? e.offsetY : e.changedTouches[0].pageY
+      const [mouseX, mouseY] = getMouseOffsetPosition(e)
+      const x = mouseX / widthScale.value
+      const y = mouseY / heightScale.value
 
       isMouseDown = true
       lastPos = { x, y }
       lastTime = new Date().getTime()
 
       if (e instanceof TouchEvent) {
-        updateMousePosition(x, y)
+        updateMousePosition(mouseX, mouseY)
         mouseInCanvas.value = true
       }
     }
 
     // 开始绘制/擦除墨迹（移动）
     const handleMousemove = (e: MouseEvent | TouchEvent) => {
-      const x = e instanceof MouseEvent ? e.offsetX : e.changedTouches[0].pageX
-      const y = e instanceof MouseEvent ? e.offsetY : e.changedTouches[0].pageY
+      const [mouseX, mouseY] = getMouseOffsetPosition(e)
+      const x = mouseX / widthScale.value
+      const y = mouseY / heightScale.value
 
-      updateMousePosition(x, y)
+      updateMousePosition(mouseX, mouseY)
 
       if (isMouseDown) handleMove(x, y)
     }
@@ -242,6 +274,8 @@ export default defineComponent({
       rubberSize,
       writingBoardRef,
       canvasRef,
+      canvasWidth,
+      canvasHeight,
       handleMousedown,
       handleMousemove,
       handleMouseup,
@@ -253,13 +287,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .writing-board {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 8;
   cursor: none;
+  @include absolute-0();
 }
 .blackboard {
   width: 100%;
@@ -267,11 +296,13 @@ export default defineComponent({
   background-color: #0f392b;
 }
 .canvas {
-  @include absolute-0();
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 .eraser, .pen {
   pointer-events: none;
-  position: fixed;
+  position: absolute;
   z-index: 9;
 
   .icon {
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index 46c1a597..0cbed56b 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -1,13 +1,18 @@
 <template>
   <div class="writing-board-tool">
-    <teleport to="body">
+    <div class="writing-board-wrap"
+      :style="{
+        width: slideWidth + 'px',
+        height: slideHeight + 'px',
+      }"
+    >
       <WritingBoard 
         ref="writingBoardRef" 
         :color="writingBoardColor" 
         :blackboard="blackboard" 
         :model="writingBoardModel"
       />
-    </teleport>
+    </div>
 
     <div class="tools">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="画笔">
@@ -51,6 +56,16 @@ export default defineComponent({
   components: {
     WritingBoard,
   },
+  props: {
+    slideWidth: {
+      type: Number,
+      required: true,
+    },
+    slideHeight: {
+      type: Number,
+      required: true,
+    },
+  },
   setup(props, { emit }) {
     const writingBoardRef = ref()
     const writingBoardColor = ref('#e2534d')
@@ -102,6 +117,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 .writing-board-tool {
   font-size: 12px;
+  z-index: 10;
+  @include absolute-0();
+
+  .writing-board-wrap {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 
   .tools {
     height: 50px;
diff --git a/src/views/Screen/index.vue b/src/views/Screen/index.vue
index cceb036d..565ba455 100644
--- a/src/views/Screen/index.vue
+++ b/src/views/Screen/index.vue
@@ -45,7 +45,12 @@
       @close="slideThumbnailModelVisible = false"
     />
 
-    <WritingBoardTool v-if="writingBoardToolVisible" @close="writingBoardToolVisible = false" />
+    <WritingBoardTool 
+      :slideWidth="slideWidth"
+      :slideHeight="slideHeight"
+      v-if="writingBoardToolVisible" 
+      @close="writingBoardToolVisible = false" 
+    />
 
     <div class="tools-left">
       <IconLeftTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execPrev()" />