From d67862f28242eb321a776720d60288ace44ca045 Mon Sep 17 00:00:00 2001
From: jiakunguo <kuochiakun@gmail.com>
Date: Thu, 20 May 2021 15:07:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=BB=E7=AC=94=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=A7=A6=E6=91=B8=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WritingBoard.vue | 549 +++++++++++++++++---------------
 1 file changed, 294 insertions(+), 255 deletions(-)

diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue
index 4a6f5188..fb501968 100644
--- a/src/components/WritingBoard.vue
+++ b/src/components/WritingBoard.vue
@@ -1,256 +1,295 @@
-<template>
-  <div class="writing-board" ref="writingBoardRef">
-    <canvas class="canvas" ref="canvasRef"
-      @mousedown="$event => handleMousedown($event)"
-      @mousemove="$event => handleMousemove($event)"
-      @mouseup="handleMouseup()"
-      @mouseleave="handleMouseup(); mouseInCanvas = false"
-      @mouseenter="mouseInCanvas = true"
-    ></canvas>
-
-    <div 
-      class="pen"
-      :style="{
-        left: mouse.x - penSize / 2 + 'px',
-        top: mouse.y - 36 + penSize / 2 + 'px',
-        color: color,
-      }"
-      v-if="mouseInCanvas && model === 'pen'"
-    ><IconWrite class="icon" size="36" /></div>
-    
-    <div 
-      class="eraser"
-      :style="{
-        left: mouse.x - rubberSize / 2 + 'px',
-        top: mouse.y - rubberSize / 2 + 'px',
-        width: rubberSize + 'px',
-        height: rubberSize + 'px',
-      }"
-      v-if="mouseInCanvas && model === 'eraser'"
-    ></div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
-
-const penSize = 6
-const rubberSize = 80
-
-export default defineComponent({
-  name: 'writing-board',
-  props: {
-    color: {
-      type: String,
-      default: '#ffcc00',
-    },
-    model: {
-      type: String as PropType<'pen' | 'eraser'>,
-      default: 'pen',
-    },
-  },
-  setup(props) {
-    let ctx: CanvasRenderingContext2D | null = null
-    const writingBoardRef = ref<HTMLElement>()
-    const canvasRef = ref<HTMLCanvasElement>()
-
-    let lastPos = {
-      x: 0,
-      y: 0,
-    }
-    let isMouseDown = false
-    let lastTime = 0
-    let lastLineWidth = -1
-
-    // 鼠标位置坐标：用于画笔或橡皮位置跟随
-    const mouse = reactive({
-      x: 0,
-      y: 0,
-    })
-    // 更新鼠标位置坐标
-    const updateMousePosition = (e: MouseEvent) => {
-      mouse.x = e.pageX
-      mouse.y = e.pageY
-    }
-    
-    // 鼠标是否处在画布范围内：处在范围内才会显示画笔或橡皮
-    const mouseInCanvas = ref(false)
-
-
-    // 初始化画布
-    const initCanvas = () => {
-      if (!canvasRef.value || !writingBoardRef.value) return
-
-      ctx = canvasRef.value.getContext('2d')
-      if (!ctx) return
-
-      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'
-    }
-    onMounted(initCanvas)
-
-    // 绘制画笔墨迹方法
-    const draw = (posX: number, posY: number, lineWidth: number) => {
-      if (!ctx) return
-
-      const lastPosX = lastPos.x
-      const lastPosY = lastPos.y
-
-      ctx.lineWidth = lineWidth
-      ctx.strokeStyle = props.color
-      ctx.beginPath()
-      ctx.moveTo(lastPosX, lastPosY)
-      ctx.lineTo(posX, posY)
-      ctx.stroke()
-      ctx.closePath()
-    }
-
-    // 擦除墨迹方法
-    const erase = (posX: number, posY: number) => {
-      if (!ctx || !canvasRef.value) return
-      const lastPosX = lastPos.x
-      const lastPosY = lastPos.y
-
-      const radius = rubberSize / 2
-
-      const sinRadius = radius * Math.sin(Math.atan((posY - lastPosY) / (posX - lastPosX)))
-      const cosRadius = radius * Math.cos(Math.atan((posY - lastPosY) / (posX - lastPosX)))
-      const rectPoint1: [number, number] = [lastPosX + sinRadius, lastPosY - cosRadius]
-      const rectPoint2: [number, number] = [lastPosX - sinRadius, lastPosY + cosRadius]
-      const rectPoint3: [number, number] = [posX + sinRadius, posY - cosRadius]
-      const rectPoint4: [number, number] = [posX - sinRadius, posY + cosRadius]
-
-      ctx.save()
-      ctx.beginPath()
-      ctx.arc(posX, posY, radius, 0, Math.PI * 2)
-      ctx.clip()
-      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
-      ctx.restore()
-
-      ctx.save()
-      ctx.beginPath()
-      ctx.moveTo(...rectPoint1)
-      ctx.lineTo(...rectPoint3)
-      ctx.lineTo(...rectPoint4)
-      ctx.lineTo(...rectPoint2)
-      ctx.closePath()
-      ctx.clip()
-      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
-      ctx.restore()
-    }
-
-    // 准备开始绘制/擦除墨迹（落笔）
-    const handleMousedown = (e: MouseEvent) => {
-      isMouseDown = true
-      lastPos = { x: e.offsetX, y: e.offsetY }
-      lastTime = new Date().getTime()
-    }
-
-    // 计算鼠标两次移动之间的距离
-    const getDistance = (posX: number, posY: number) => {
-      const lastPosX = lastPos.x
-      const lastPosY = lastPos.y
-      return Math.sqrt((posX - lastPosX) * (posX - lastPosX) + (posY - lastPosY) * (posY - lastPosY))
-    }
-
-    // 根据鼠标两次移动之间的距离s和时间t计算绘制速度，速度越快，墨迹越细
-    const getLineWidth = (s: number, t: number) => {
-      const maxV = 10
-      const minV = 0.1
-      const maxWidth = penSize
-      const minWidth = 3
-      const v = s / t
-      let lineWidth
-
-      if (v <= minV) lineWidth = maxWidth
-      else if (v >= maxV) lineWidth = minWidth
-      else lineWidth = maxWidth - v / maxV * maxWidth
-
-      if (lastLineWidth === -1) return lineWidth
-      return lineWidth * 1 / 3 + lastLineWidth * 2 / 3
-    }
-
-    // 开始绘制/擦除墨迹（移动）
-    const handleMousemove = (e: MouseEvent) => {
-      updateMousePosition(e)
-
-      if (!isMouseDown) return
-      
-      const time = new Date().getTime()
-
-      if (props.model === 'pen') {
-        const s = getDistance(e.offsetX, e.offsetY)
-        const t = time - lastTime
-        const lineWidth = getLineWidth(s, t)
-  
-        draw(e.offsetX, e.offsetY, lineWidth)
-        lastLineWidth = lineWidth
-      }
-      else erase(e.offsetX, e.offsetY)
-
-      lastPos = { x: e.offsetX, y: e.offsetY }
-      lastTime = new Date().getTime()
-    }
-
-    // 结束绘制/擦除墨迹（停笔）
-    const handleMouseup = () => {
-      if (!isMouseDown) return
-      isMouseDown = false
-    }
-
-    // 清空画布
-    const clearCanvas = () => {
-      if (!ctx || !canvasRef.value) return
-      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
-    }
-
-    return {
-      mouse,
-      mouseInCanvas,
-      penSize,
-      rubberSize,
-      writingBoardRef,
-      canvasRef,
-      handleMousedown,
-      handleMousemove,
-      handleMouseup,
-      clearCanvas,
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-.writing-board {
-  position: fixed;
-  top: 0;
-  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 #555);
-  }
-}
-.eraser {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  border: 4px solid rgba($color: #555, $alpha: .15);
-  color: rgba($color: #555, $alpha: .75);
-}
+<template>
+  <div class="writing-board" ref="writingBoardRef">
+    <canvas class="canvas" ref="canvasRef"
+      @mousedown="$event => handleMousedown($event)"
+      @mousemove="$event => handleMousemove($event)"
+      @mouseup="handleMouseup()"
+      @touchstart.prevent="$event => { handleTouchdown($event);mouseInCanvas = true }"
+      @touchmove.prevent="$event => handleTouchmove($event)"
+      @touchend="handleMouseup();mouseInCanvas = false"
+      @mouseleave="handleMouseup(); mouseInCanvas = false"
+      @mouseenter="mouseInCanvas = true"
+    ></canvas>
+
+    <div 
+      class="pen"
+      :style="{
+        left: mouse.x - penSize / 2 + 'px',
+        top: mouse.y - 36 + penSize / 2 + 'px',
+        color: color,
+      }"
+      v-if="mouseInCanvas && model === 'pen'"
+    ><IconWrite class="icon" size="36" /></div>
+    
+    <div 
+      class="eraser"
+      :style="{
+        left: mouse.x - rubberSize / 2 + 'px',
+        top: mouse.y - rubberSize / 2 + 'px',
+        width: rubberSize + 'px',
+        height: rubberSize + 'px',
+      }"
+      v-if="mouseInCanvas && model === 'eraser'"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
+
+const penSize = 6
+const rubberSize = 80
+
+export default defineComponent({
+  name: 'writing-board',
+  props: {
+    color: {
+      type: String,
+      default: '#ffcc00',
+    },
+    model: {
+      type: String as PropType<'pen' | 'eraser'>,
+      default: 'pen',
+    },
+  },
+  setup(props) {
+    let ctx: CanvasRenderingContext2D | null = null
+    const writingBoardRef = ref<HTMLElement>()
+    const canvasRef = ref<HTMLCanvasElement>()
+
+    let lastPos = {
+      x: 0,
+      y: 0,
+    }
+    let isMouseDown = false
+    let lastTime = 0
+    let lastLineWidth = -1
+
+    // 鼠标位置坐标：用于画笔或橡皮位置跟随
+    const mouse = reactive({
+      x: 0,
+      y: 0,
+    })
+    // 更新鼠标位置坐标
+    const updateMousePosition = (e: MouseEvent | TouchEvent) => {
+      if (e instanceof MouseEvent) {
+        mouse.x = e.pageX
+        mouse.y = e.pageY
+      }
+      else if (e instanceof TouchEvent) {
+        mouse.x = e.targetTouches[0].clientX
+        mouse.y = e.targetTouches[0].clientY
+      }
+    }
+    
+    // 鼠标是否处在画布范围内：处在范围内才会显示画笔或橡皮
+    const mouseInCanvas = ref(false)
+
+
+    // 初始化画布
+    const initCanvas = () => {
+      if (!canvasRef.value || !writingBoardRef.value) return
+
+      ctx = canvasRef.value.getContext('2d')
+      if (!ctx) return
+
+      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'
+    }
+    onMounted(initCanvas)
+
+    // 绘制画笔墨迹方法
+    const draw = (posX: number, posY: number, lineWidth: number) => {
+      if (!ctx) return
+
+      const lastPosX = lastPos.x
+      const lastPosY = lastPos.y
+
+      ctx.lineWidth = lineWidth
+      ctx.strokeStyle = props.color
+      ctx.beginPath()
+      ctx.moveTo(lastPosX, lastPosY)
+      ctx.lineTo(posX, posY)
+      ctx.stroke()
+      ctx.closePath()
+    }
+
+    // 擦除墨迹方法
+    const erase = (posX: number, posY: number) => {
+      if (!ctx || !canvasRef.value) return
+      const lastPosX = lastPos.x
+      const lastPosY = lastPos.y
+
+      const radius = rubberSize / 2
+
+      const sinRadius = radius * Math.sin(Math.atan((posY - lastPosY) / (posX - lastPosX)))
+      const cosRadius = radius * Math.cos(Math.atan((posY - lastPosY) / (posX - lastPosX)))
+      const rectPoint1: [number, number] = [lastPosX + sinRadius, lastPosY - cosRadius]
+      const rectPoint2: [number, number] = [lastPosX - sinRadius, lastPosY + cosRadius]
+      const rectPoint3: [number, number] = [posX + sinRadius, posY - cosRadius]
+      const rectPoint4: [number, number] = [posX - sinRadius, posY + cosRadius]
+
+      ctx.save()
+      ctx.beginPath()
+      ctx.arc(posX, posY, radius, 0, Math.PI * 2)
+      ctx.clip()
+      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+      ctx.restore()
+
+      ctx.save()
+      ctx.beginPath()
+      ctx.moveTo(...rectPoint1)
+      ctx.lineTo(...rectPoint3)
+      ctx.lineTo(...rectPoint4)
+      ctx.lineTo(...rectPoint2)
+      ctx.closePath()
+      ctx.clip()
+      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+      ctx.restore()
+    }
+
+    // 计算鼠标两次移动之间的距离
+    const getDistance = (posX: number, posY: number) => {
+      const lastPosX = lastPos.x
+      const lastPosY = lastPos.y
+      return Math.sqrt((posX - lastPosX) * (posX - lastPosX) + (posY - lastPosY) * (posY - lastPosY))
+    }
+
+    // 根据鼠标两次移动之间的距离s和时间t计算绘制速度，速度越快，墨迹越细
+    const getLineWidth = (s: number, t: number) => {
+      const maxV = 10
+      const minV = 0.1
+      const maxWidth = penSize
+      const minWidth = 3
+      const v = s / t
+      let lineWidth
+
+      if (v <= minV) {
+        lineWidth = maxWidth
+      }
+      else if (v >= maxV) {
+        lineWidth = minWidth
+      }
+      else {
+        lineWidth = maxWidth - v / maxV * maxWidth
+      }
+
+      if (lastLineWidth === -1) return lineWidth
+      return lineWidth * 1 / 3 + lastLineWidth * 2 / 3
+    }
+
+    // 路径操作
+    const handleMove = (x: number, y: number) => {
+      const time = new Date().getTime()
+
+      if (props.model === 'pen') {
+        const s = getDistance(x, y)
+        const t = time - lastTime
+        const lineWidth = getLineWidth(s, t)
+
+        draw(x, y, lineWidth)
+        lastLineWidth = lineWidth
+      }
+      else {
+        erase(x, y)
+      }
+
+      lastPos = {x, y}
+      lastTime = new Date().getTime()
+    }
+
+    // 处理触摸事件
+    const handleTouchdown = (e: TouchEvent) => {
+      // mouseInCanvas.value = true
+      isMouseDown = true
+      lastPos = {x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY}
+      lastTime = new Date().getTime()
+    }
+
+    const handleTouchmove = (e: TouchEvent) => {
+      updateMousePosition(e)
+      if (!isMouseDown) return
+      handleMove(e.targetTouches[0].clientX, e.targetTouches[0].clientY)
+    }
+
+    // 处理鼠标事件
+
+    // 准备开始绘制/擦除墨迹（落笔）
+    const handleMousedown = (e: MouseEvent) => {
+      isMouseDown = true
+      lastPos = {x: e.offsetX, y: e.offsetY}
+      lastTime = new Date().getTime()
+    }
+
+    // 开始绘制/擦除墨迹（移动）
+    const handleMousemove = (e: MouseEvent) => {
+      updateMousePosition(e)
+
+      if (!isMouseDown) return
+      handleMove(e.offsetX, e.offsetY)
+    }
+
+    // 结束绘制/擦除墨迹（停笔）
+    const handleMouseup = () => {
+      if (!isMouseDown) return
+      isMouseDown = false
+    }
+
+    // 清空画布
+    const clearCanvas = () => {
+      if (!ctx || !canvasRef.value) return
+      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+    }
+
+    return {
+      mouse,
+      mouseInCanvas,
+      penSize,
+      rubberSize,
+      writingBoardRef,
+      canvasRef,
+      handleMousedown,
+      handleMousemove,
+      handleMouseup,
+      clearCanvas,
+      handleTouchdown,
+      handleTouchmove
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.writing-board {
+  position: fixed;
+  top: 0;
+  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 #555);
+  }
+}
+.eraser {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 4px solid rgba($color: #555, $alpha: .15);
+  color: rgba($color: #555, $alpha: .75);
+}
 </style>
\ No newline at end of file