From cf6a94ea0261be7ba05fe58b65ce7c160f917b22 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Wed, 13 Jan 2021 20:44:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=94=BB=E7=AC=94=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IconFont.ts      |  2 +-
 src/components/WritingBoard.vue | 53 +++++++++++++++++++++++++++++++--
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/components/IconFont.ts b/src/components/IconFont.ts
index 786e90e7..35b9dfea 100644
--- a/src/components/IconFont.ts
+++ b/src/components/IconFont.ts
@@ -3,5 +3,5 @@
 import { createFromIconfontCN } from '@ant-design/icons-vue'
 
 export default createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2317509_nn4bn0af7a.js',
+  scriptUrl: '//at.alicdn.com/t/font_2317509_skpetzgttwg.js',
 }) as any
\ No newline at end of file
diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue
index 7bfe60d2..2e2606cc 100644
--- a/src/components/WritingBoard.vue
+++ b/src/components/WritingBoard.vue
@@ -3,14 +3,34 @@
     <canvas class="canvas" ref="canvasRef"
       @mousedown="$event => handleMousedown($event)"
       @mousemove="$event => handleMousemove($event)"
-      @mouseup="handleMouseup"
-      @mouseout="handleMouseup"
+      @mouseup="handleMouseup()"
+      @mouseleave="handleMouseup(); mouseInCanvas = false"
+      @mouseenter="mouseInCanvas = true"
     ></canvas>
+
+    <div 
+      class="pen"
+      :style="{
+        left: mouse.x - penSize / 2 + 'px',
+        top: mouse.y - 50 + penSize / 2 + 'px',
+        color: color,
+      }"
+      v-if="mouseInCanvas && model === 'pen'"
+    ><IconFont class="icon" :style="{ fontSize: '50px' }" type="icon-pen" /></div>
+    
+    <div 
+      class="eraser"
+      :style="{
+        left: mouse.x - rubberSize / 2 + 'px',
+        top: mouse.y - rubberSize / 2 + 'px',
+      }"
+      v-if="mouseInCanvas && model === 'eraser'"
+    ><IconFont class="icon" :style="{ fontSize: rubberSize + 'px' }" type="icon-eraser" /></div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, PropType, ref } from 'vue'
+import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
 
 const penSize = 6
 const rubberSize = 80
@@ -39,6 +59,12 @@ export default defineComponent({
     let lastTime = 0
     let lastLineWidth = -1
 
+    const mouse = reactive({
+      x: 0,
+      y: 0,
+    })
+    const mouseInCanvas = ref(false)
+
     const initCanvas = () => {
       if(!canvasRef.value || !writingBoardRef.value) return
 
@@ -156,7 +182,14 @@ export default defineComponent({
       startDraw(e.offsetX, e.offsetY)
     }
 
+    const updateMousePosition = (e: MouseEvent) => {
+      mouse.x = e.pageX
+      mouse.y = e.pageY
+    }
+
     const handleMousemove = (e: MouseEvent) => {
+      updateMousePosition(e)
+
       if(!isMouseDown) return
       startMove(e.offsetX, e.offsetY)
     }
@@ -175,6 +208,10 @@ export default defineComponent({
     onMounted(initCanvas)
 
     return {
+      mouse,
+      mouseInCanvas,
+      penSize,
+      rubberSize,
       writingBoardRef,
       canvasRef,
       handleMousedown,
@@ -193,6 +230,16 @@ export default defineComponent({
   bottom: 0;
   left: 0;
   right: 0;
+  z-index: 8;
+  cursor: none;
+}
+.eraser, .pen {
+  pointer-events: none;
+  position: fixed;
   z-index: 9;
+
+  .icon {
+    filter: drop-shadow(2px 2px 2px #999);
+  }
 }
 </style>
\ No newline at end of file