Vue-电子签名(E-Signature)

最新推荐文章于 2025-02-08 09:44:16 发布

安好OH

最新推荐文章于 2025-02-08 09:44:16 发布

阅读量636

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_39870203/article/details/129931631

版权

该代码段展示了如何在Vue.js组件中创建一个电子签名板。它利用canvas元素进行绘图，处理鼠标和触摸事件来跟踪用户的签名动作。用户可以进行签名，重签和确认操作。签名完成后，组件会将签名的内容以数据URL形式传出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<div class="signatureBox">
<div ref="canvasHW" class="canvasBox">
<canvas ref="canvasF"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
@mousedown="mouseDown"
@mousemove="mouseMove"
@mouseup="mouseUp">
</canvas>
</div>
<div class="signature-btnArea">
<el-button class="btn" type="info" @click.native.prevent="handleGoBack()">返回</el-button>
<el-button class="btn" type="info" @click.native.prevent="handleOverwrite()">重签</el-button>
<el-button class="btn" type="info" @click.native.prevent="handleSubmit()">确认</el-button>
</div>
</div>
</template>
export default {
name: 'ESignature',
data() {
return {
points: [],
canvasTxt: null,
stage_info: [],
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
isDown: false,
strokeStyle: '#000',
lineWidth: 2
}
},
mounted() {
this.initCanvas()
},
methods: {
// 初始化Canvas
initCanvas() {
let canvas = this.$refs.canvasF
// 获取画布的高度
canvas.height = this.$refs.canvasHW.offsetHeight - 20
// 获取画布的宽度
canvas.width = this.$refs.canvasHW.offsetWidth - 20
// 创建 context 对象
this.canvasTxt = canvas.getContext('2d')
this.stage_info = canvas.getBoundingClientRect()
},
// 鼠标按下事件 - 准备绘画
mouseDown(ev) {
ev = ev || event
ev.preventDefault()
if (ev) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.startX = obj.x
this.startY = obj.y
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
this.isDown = true
}
},
// 触摸开始事件 - 准备绘画
touchStart(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stage_info.left,
y: ev.targetTouches[0].clientY - this.stage_info.top
}
this.startX = obj.x
this.startY = obj.y
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
}
},
// 鼠标移动事件 - 开始绘画
mouseMove(ev) {
ev = ev || event
ev.preventDefault()
if (this.isDown) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.moveY = obj.y
this.moveX = obj.x
this.canvasTxt.strokeStyle = this.strokeStyle
this.canvasTxt.lineWidth = this.lineWidth
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
}
},
// 触摸移动事件 - 开始绘画
touchMove(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stage_info.left,
y: ev.targetTouches[0].clientY - this.stage_info.top
}
this.moveY = obj.y
this.moveX = obj.x
// 设置线条颜色
this.canvasTxt.strokeStyle = this.strokeStyle
// 设置线条宽度
this.canvasTxt.lineWidth = this.lineWidth
// 绘制开始路径
this.canvasTxt.beginPath()
// 定义线条开始坐标
this.canvasTxt.moveTo(this.startX, this.startY)
// 定义线条结束坐标
this.canvasTxt.lineTo(obj.x, obj.y)
// 绘制线条
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
}
},
// 松开鼠标事件 - 停止绘画
mouseUp(ev) {
ev = ev || event
ev.preventDefault()
if (ev) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
this.points.push({ x: -1, y: -1 })
this.isDown = false
}
},
// 触摸结束事件 - 停止绘画
touchEnd(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stage_info.left,
y: ev.targetTouches[0].clientY - this.stage_info.top
}
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
this.points.push({ x: -1, y: -1 })
}
},
// 返回
handleGoBack() {
this.handleOverwrite()
this.$emit('on-back')
},
// 重写
handleOverwrite() {
this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
this.points = []
},
// 提交
handleSubmit() {
if (this.points.length < 50) {
if (this.points.length == 0) {
this.$message.error('请填写你的名称');
}
return
}
this.$emit('on-content', this.$refs.canvasF.toDataURL())
this.handleOverwrite()
}
}
}