improvement: 提升指针的流畅度

src/components/PDF/PointerCanvas.vue

@@ -19,7 +19,9 @@ export default {
       width: window.innerWidth,
       height: window.innerHeight,
       rects: [],
-      drawingRect: {}
+      drawingRect: {},
+      // 为了突破30fps限制（应该与chrome优化机制有关），往数组中多放入冗余数字，以让动画更流畅
+      overrate: 4
     }
   },
   computed: {
@@ -45,7 +47,7 @@ export default {
     this._canvas.addEventListener('mousemove', this.handleMouseMove)
     this._canvas.addEventListener('mousedown', this.handleMouseDown)
     this._canvas.addEventListener('mouseup', this.handleMouseUp)
-    this._interval = setInterval(this.shiftPoints, 40)
+    this._interval = setInterval(this.shiftPoints, 1000 / 90)
   },
   destroyed () {
     clearInterval(this._interval)
@@ -64,15 +66,15 @@ export default {
       if (this.pointerActive) {
         const { x, y } = this.points[this.points.length - 1] ?? { x: 0, y: 0 }
         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 > 24) {
-            this.points.pop()
+          [...Array(this.overrate)].forEach(_ => this.points.unshift({ x: e.clientX, y: e.clientY }))
+          if (this.points.length > 100) {
+            [...Array(this.overrate)].forEach(_ => this.points.pop())
           }
         }
       }
     },
     shiftPoints () {
-      if (this.points.length > 10) {
+      if (this.points.length > 34) {
         this.points.pop()
       }
       if (this.points.length > 0) {
@@ -101,9 +103,7 @@ export default {
         this.drawingRect.begin && this.drawingRect.end && this.rects.push(this.drawingRect)
         this._canvas.removeEventListener('mousemove', this.handleBoxMouseMove)
         this.disablePointer = false
-        requestAnimationFrame(() => {
-          this.renderer()
-        })
+        this.renderer()
         this.drawingRect = {}
       }
     },
@@ -113,8 +113,8 @@ export default {
       // 框选
       this._ctx.lineWidth = 4
       this._ctx.lineJoin = 'round'
-      this._ctx.strokeStyle = `rgba(211, 47, 47, .04)`
-      this._ctx.fillStyle = `rgba(211, 47, 47, .1)`
+      this._ctx.strokeStyle = `rgba(211, 47, 47, .8)`
+      this._ctx.fillStyle = `rgba(211, 47, 47, .05)`
       this.rects.forEach(rect => {
         if (rect) {
           this._ctx.beginPath()
@@ -138,14 +138,15 @@ export default {
       }
 
       // 线条
-      this._ctx.strokeStyle = `rgba(211, 47, 47, 0.25)`
-      this._ctx.fillStyle = `rgba(211, 47, 47, 1)`
+      this._ctx.strokeStyle = `rgba(211, 47, 47, .1)`
       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 + 8) / 2
-        this._ctx.stroke()
+        if (index % this.overrate) {
+          this._ctx.lineTo(point.x, point.y)
+          this._ctx.lineWidth = (length - index + 8) / (2 * this.overrate)
+          this._ctx.stroke()
+        }
       })
       this._ctx.closePath()
     }