电子签名

src/components/miliu-autograph/miliu-autograph.vue

@@ -1,17 +1,18 @@
 <template>
   <view
-    class="whole canvas-autograph flexc"
+    class="whole canvas-autograph flex"
     @touchmove.prevent.stop
     @wheel.prevent.stop
     v-show="modelValue"
+    style="overflow: hidden"
   >
     <canvas
       class="scroll-view"
       id="mycanvas"
       canvas-id="mycanvas"
-      @touchstart="touchstart"
+      @touchstart.prevent.stop="touchstart"
-      @touchmove="touchmove"
+      @touchmove.prevent.stop="touchmove"
-      @touchend="touchend"
+      @touchend.prevent.stop="touchend"
       disable-scroll="true"
     />
     <view class="fun-box">
@@ -130,7 +131,8 @@ const drawBackground = (ctx, width = 100, height = 100) => {
   ctx.stroke()
 
   // 正楷体水印
-  ctx.setFontSize(190)
+  const fontSize = nickName.value.length == 5 ? 140 : 190
+  ctx.setFontSize(fontSize)
   ctx.setFillStyle('rgba(180,180,180,0.25)')
   ctx.setTextAlign('center')
   ctx.setTextBaseline('middle')
@@ -168,28 +170,39 @@ const touchstart = (e) => {
   canvaCtx.draw(true)
 }
 
+let isDrawing = false
+let lastMoveTime = 0
+const throttleInterval = 6 // 50ms
 const touchmove = (e) => {
+  const now = Date.now()
+  if (now - lastMoveTime > throttleInterval) {
+    lastMoveTime = now
     const x = e.changedTouches[0].x
     const y = e.changedTouches[0].y
     const p = { X: x, Y: y }
 
-  // 把点推入当前路径
     const cur = paths.value[paths.value.length - 1]
     if (cur) cur.push(p)
 
-  // 在可见画布上增量画这段
+    if (cur && cur.length >= 2) {
+      const prev = cur[cur.length - 2]
       canvaCtx.setLineWidth(PEN.width)
       canvaCtx.setStrokeStyle(PEN.color)
       canvaCtx.setLineCap('round')
       canvaCtx.setLineJoin('round')
-
-  if (cur && cur.length >= 2) {
-    const prev = cur[cur.length - 2]
       canvaCtx.beginPath()
       canvaCtx.moveTo(prev.X, prev.Y)
       canvaCtx.lineTo(p.X, p.Y)
       canvaCtx.stroke()
-    canvaCtx.draw(true)
+
+      // 设置标记，确保一次性绘制
+      if (!isDrawing) {
+        isDrawing = true
+        canvaCtx.draw(true, () => {
+          isDrawing = false // 绘制完成后清除标记
+        })
+      }
+    }
   }
 }