这篇文章将为大家详细讲解有关vue实现一个电子签名组件的示例，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
想要绘制图形，第一步想到的就是使用canvas标签，在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件，被吐槽不够安全，那么这个电子签名组件想必不会被吐槽了吧~
计算
安全
数据库
网络和加速
企业服务
<canvas> 标签是 HTML 5 中的新标签。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。canvas标签本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成。
使用canvas绘图有几个必要的步骤：
在当前电子签名需求中，由于签名其实是由一条条线组成的，因此我们会用到以下几个方法：
想要在canvas中绘图，还需要绑定几个特定的事件，而这些事件在pc端和手机端不尽相同
canvas标签并绑定事件<canvas
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
ref="canvasF"
@mousedown="mouseDown"
@mousemove="mouseMove"
@mouseup="mouseUp"
></canvas>在mounted生命周期初始化
mounted() {
let canvas = this.$refs.canvasF;
canvas.height = this.$refs.canvasHW.offsetHeight - 100;
canvas.width = this.$refs.canvasHW.offsetWidth - 10;
this.canvasTxt = canvas.getContext("2d");
this.canvasTxt.strokeStyle = this.color;
this.canvasTxt.lineWidth = this.linewidth;
}//电脑设备事件
mouseDown(ev) {
ev = ev || event;
ev.preventDefault();
let obj = {
x: ev.offsetX,
y: ev.offsetY
};
this.startX = obj.x;
this.startY = obj.y;
this.canvasTxt.beginPath();//开始作画
this.points.push(obj);//记录点
this.isDown = true;
},//移动设备事件
touchStart(ev) {
ev = ev || event;
ev.preventDefault();
if (ev.touches.length == 1) {
this.isDraw = true; //签名标记
let obj = {
x: ev.targetTouches[0].clientX,
y:
ev.targetTouches[0].clientY -
(document.body.offsetHeight * 0.5 +
this.$refs.canvasHW.offsetHeight * 0.1)
};
//y的计算值中：document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高，
//this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高
this.startX = obj.x;
this.startY = obj.y;
this.canvasTxt.beginPath();//开始作画
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.moveTo(this.startX, this.startY);//移动画笔
this.canvasTxt.lineTo(obj.x, obj.y);//创建线条
this.canvasTxt.stroke();//画线
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,
y:
ev.targetTouches[0].clientY -
(document.body.offsetHeight * 0.5 +
this.$refs.canvasHW.offsetHeight * 0.1)
};
this.moveY = obj.y;
this.moveX = obj.x;
this.canvasTxt.moveTo(this.startX, this.startY);//移动画笔
this.canvasTxt.lineTo(obj.x, obj.y);//创建线条
this.canvasTxt.stroke();//画线
this.startY = obj.y;
this.startX = obj.x;
this.points.push(obj);//记录点
}
},//电脑设备事件
mouseUp(ev) {
ev = ev || event;
ev.preventDefault();
if (1) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
};
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,
y:
ev.targetTouches[0].clientY -
(document.body.offsetHeight * 0.5 +
this.$refs.canvasHW.offsetHeight * 0.1)
};
this.canvasTxt.closePath();//收笔
this.points.push(obj);//记录点
this.points.push({ x: -1, y: -1 });//记录点
}
},发现自己写错字了，擦掉画板重新写过
//重写
overwrite() {
this.canvasTxt.clearRect(
0,
0,
this.$refs.canvasF.width,
this.$refs.canvasF.height
);
this.points = [];
this.isDraw = false; //签名标记
},data() {
return {
points: [],
canvasTxt: null,
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
endY: 0,
endX: 0,
w: null,
h: null,
isDown: false,
color: "#000",
linewidth: 3,
isDraw: false //签名标记
};
},
关于vue实现一个电子签名组件的示例就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
