使用vue实现一个电子签名组件的示例代码

前端  /  管理员 发布于 5年前   599

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

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

canvas

标签是 HTML 5 中的新标签。
标签只是图形容器，您必须使用脚本来绘制图形。

canvas标签本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成。

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

1. 获取canvas元素
2. 通过canvas元素创建context对象
3. 通过context对象来绘制图形

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

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

事件

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

pc端事件

• mousedown
• mousemove
• mouseup

手机端事件

• touchstart
• touchmove
• touchend

核心代码

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• vue+element加入签名效果（移动端可用）