使用vue实现一个电子签名组件的示例代码
在生活中我们使用到电子签名最多的地方可能就是银行了，每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板
想要绘制图形，第一步想到的就是使用canvas标签，在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件，被吐槽不够安全，那么这个电子签名组件想必不会被吐槽了吧~
canvas
canvas标签本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。
使用canvas绘图有几个必要的步骤：
- 获取canvas元素
- 通过canvas元素创建context对象
- 通过context对象来绘制图形
在当前电子签名需求中，由于签名其实是由一条条线组成的，因此我们会用到以下几个方法：
- beginPath()：开始一条路径或重置当前的路径
- moveTo()：把路径移动到画布中的指定点，不创建线条
- lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条
- stroke()：绘制已定义的路径
- closePath()：创建从当前点回到起始点的路径
事件
想要在canvas中绘图，还需要绑定几个特定的事件，而这些事件在pc端和手机端不尽相同
pc端事件
- mousedown
- mousemove
- mouseup
手机端事件
- touchstart
- touchmove
- touchend
核心代码
初始化canvas标签并绑定事件
获取画笔
在mounted生命周期初始化
mounted(){
letcanvas=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
//电脑设备事件
mouseDown(ev){
ev=ev||event;
ev.preventDefault();
letobj={
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
//移动设备事件
touchStart(ev){
ev=ev||event;
ev.preventDefault();
if(ev.touches.length==1){
this.isDraw=true;//签名标记
letobj={
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
//电脑设备事件
mouseMove(ev){
ev=ev||event;
ev.preventDefault();
if(this.isDown){
letobj={
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
//移动设备事件
touchMove(ev){
ev=ev||event;
ev.preventDefault();
if(ev.touches.length==1){
letobj={
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
//电脑设备事件
mouseUp(ev){
ev=ev||event;
ev.preventDefault();
if(1){
letobj={
x:ev.offsetX,
y:ev.offsetY
};
this.canvasTxt.closePath();//收笔
this.points.push(obj);//记录点
this.points.push({x:-1,y:-1});
this.isDown=false;
}
},
touchEnd
//移动设备事件
touchEnd(ev){
ev=ev||event;
ev.preventDefault();
if(ev.touches.length==1){
letobj={
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
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//签名标记
};
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。