feat: 指针功能

src/components/PDF/Pdf.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="pdf">
     <canvas class="pdf pdf-canvas" id="pdf-canvas" :class="classList"></canvas>
     <div v-if="loading" class="loading">加载中...</div>
   </div>
@@ -9,7 +9,7 @@
 import pdfjs from '@/utils/pdf'
 import downloadFile from '@/utils/download-base64'
 import { mapState } from 'vuex'
-import { SET_TOTAL_PAGES, USE_SCREEN_SHOT } from '@/store/types/pdf-types'
+import { SET_TOTAL_PAGES } from '@/store/types/pdf-types'
 
 export default {
   data () {
@@ -51,12 +51,6 @@ export default {
   watch: {
     currentPage () {
       this.showPage()
-    },
-    screenShot () {
-      if (this.screenShot) {
-        this.getScreenShot()
-        this.$store.commit(USE_SCREEN_SHOT)
-      }
     }
   },
   methods: {
@@ -96,7 +90,8 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
-div {
+.pdf {
+  z-index: -1;
   position: relative;
 }
 .loading {
@@ -112,7 +107,8 @@ div {
   font-size: 40px;
 }
 
-canvas {
+.pdf-canvas {
+  z-index: 0;
   outline: none;
   display: block;
   direction: ltr;

src/components/PDF/PointerCanvas.vue

@@ -0,0 +1,83 @@
+<template>
+  <canvas :width="width" :height="height" class="pointer-canvas" ref="pointerCanvas">
+  </canvas>
+</template>
+
+<script>
+export default {
+  name: 'PointerCanvas',
+  data () {
+    return {
+      points: [],
+      width: window.innerWidth,
+      height: window.innerHeight
+    }
+  },
+  mounted () {
+    this._canvas = this.$refs.pointerCanvas
+    this._ctx = this._canvas.getContext('2d')
+
+    window.addEventListener('resize', this.handleResize)
+    this._canvas.addEventListener('mousemove', this.handleMouseMove)
+    this._interval = setInterval(this.shiftPoints, 32)
+  },
+  destroyed () {
+    clearInterval(this._interval)
+    window.removeEventListener('resize', this.handleResize)
+    this._canvas.removeEventListener('mousemove', this.handleMouseMove)
+  },
+  methods: {
+    handleResize () {
+      this.width = window.innerWidth
+      this.height = window.innerHeight
+    },
+    handleMouseMove (e) {
+      const { x, y } = this.points[this.points.length - 1] ?? { x: 0, y: 0 }
+      console.log(x, e.clientX)
+      if (this.points.length === 0 || Math.abs(x - e.clientX) > 8 || Math.abs(y - e.clientY) > 8) {
+        this.points.unshift({ x: e.clientX, y: e.clientY })
+        if (this.points.length > 20) {
+          this.points.pop()
+        }
+      }
+    },
+    shiftPoints () {
+      if (this.points.length > 20) {
+        this.points.pop()
+      }
+      if (this.points.length > 0) {
+        this.points.pop()
+      }
+      this.renderer()
+    },
+    renderer () {
+      this._ctx.lineJoin = 'round'
+      this._ctx.strokeStyle = `rgba(211, 47, 47, 0.3)`
+      this._ctx.fillStyle = `rgba(211, 47, 47, 1)`
+      this._ctx.clearRect(0, 0, 2000, 2000)
+      this._ctx.beginPath()
+      const length = this.points.length
+      this.points.forEach((point, index) => {
+        this._ctx.lineTo(point.x, point.y)
+        this._ctx.lineWidth = (length - index + 6) / 1.5
+        this._ctx.stroke()
+      })
+      this._ctx.closePath()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.pointer-canvas {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1;
+}
+</style>

src/views/reader/PdfReader.vue

@@ -2,6 +2,7 @@
   <div class="pdf-reader">
     <icon-button @click="$router.go(-1)" title="返回主页面">arrow_back</icon-button>
     <pdf-viewer></pdf-viewer>
+    <pointer-canvas></pointer-canvas>
     <discussion-area
       :class="showDiscussion ? 'show-discussion' : 'hide-discussion'"
     >
@@ -24,9 +25,10 @@ import {
   USE_FOCUS
 } from '@/store/types/pdf-types'
 import IconButton from '@/components/Basic/IconButton'
+import PointerCanvas from '@/components/PDF/PointerCanvas'
 
 export default {
-  components: { IconButton, DiscussionArea, PdfViewer },
+  components: { PointerCanvas, IconButton, DiscussionArea, PdfViewer },
   computed: {
     ...mapState({
       src: state => state.pdf.src,