vlambda博客
学习文章列表

使用 vue 实现一个电子签名组件

本文转载于 SegmentFault 社区




使用 vue 实现一个电子签名组件

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用 vue 实现一个电子签名的面板


想要绘制图形,第一步想到的就是使用 canvas 标签,在之前的文章里我们使用 canvas 实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件相比不会被吐槽了吧~



No.1

canvas



  
    
    
  
<canvas> 标签是 HTML 5 中的新标签。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
canvas 标签本身是没有绘图能力的,所有的绘制工作必须在 JavaScript 内部完成。

使用 canvas 绘图有几个必要的步骤:

•  获取 canvas 元素
•  通过 canvas 元素创建 context 对象
•  通过 context 对象来绘制图形

在当前电子签名需求中,由于签名其实是由一条条线组成的,因此我们会用到以下几个方法:

•  beginPath() :开始一条路径或重置当前的路径
•  moveTo():把路径移动到画布中的指定点,不创建线条
•  lineTo():添加一个新点,然后在画布中创建从该点到最后指定点的线条
•  stroke():绘制已定义的路径
•  closePath():创建从当前点回到起始点的路径



No.2

事件



想要在 canvas 中绘图,还需要绑定几个特定的事件,而这些事件在 pc 端和手机端不尽相同

pc 端事件


  • mousedown
  • mousemove
  • mouseup


手机端事件


  • touchstart
  • touchmove
  • touchend



No.3

核心代码



初始化 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


  
    
    
  
//电脑设备事件
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


  
    
    
  
//移动设备事件
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


  
    
    
  
//电脑设备事件
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


  
    
    
  
//移动设备事件
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


  
    
    
  
//电脑设备事件
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


 
   
   
 

 
   
   
 
//移动设备事件
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


 
   
   
 

 
   
   
 
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 //签名标记
};
},
 
   
   
 



Segmentfault 思否社区文章链接:
https://segmentfault.com/a/1190000021480313



我的 2019 年终总结丨征文规则

回顾总结你的 2019,展望畅想你的 2020。只要是你的故事、你自己的总结,那么就发上来吧~思否小姐姐会把优质文章汇总收录并发出,参与征文活动的优质文章内容,还将:

1. 被推荐到社区首页及技术交流群,分享给更多的开发者。
2. 获选的优质投稿内容,还将有机会获得社区精美礼品 (只要被收录就有礼物,人人有份)






点击下方图片
了解活动详情