vue如何实现一个电子签名组件？

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

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

canvas

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

登录后复制

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

事件

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

pc端事件

mousedownmousemovemouseup

手机端事件

touchstarttouchmovetouchend

核心代码

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

登录后复制

相关推荐：

2020年前端vue面试题大汇总（附答案）

2020年前端vue面试题大汇总（附答案）

更多编程相关知识，请访问：2020年前端vue面试题大汇总（附答案）！！

以上就是vue如何实现一个电子签名组件？的详细内容，更多请关注【创想鸟】其它相关文章！