bonus
/
bonus-material-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

电子签名

This commit is contained in:
bb_pan 2025-08-30 17:36:41 +08:00
parent 30a1fce82a
commit 4b3e10b980
1 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/miliu-autograph/miliu-autograph.vue
View File

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