应用vue完成一个电子签名组件

在生活中大家应用到电子签名数最多的地区将会便是金融机构了，每一次都是给你留有名字。今日大家就需要用vue完成一个电子签名的控制面板

要想绘图图型，第一步想起的便是应用canvas标识，在以前的文章内容里大家应用canvas完成了一个前端开发转化成图形验证码的组件，被吐槽不足安全性，那麼这一电子签名组件对比不容易被吐槽了吧~

canvas

<canvas> 标识是 HTML 5 中的新标识。<canvas> 标识仅仅图型器皿，您务必应用脚本制作来绘图图型。canvas标识自身是沒有制图工作能力的，全部的绘图工作中务必在 JavaScript 內部进行。

应用canvas制图几个必需的流程：

获得canvas元素根据canvas元素建立context目标根据context目标来绘图图型在当今电子签名要求中，因为签字实际上是由一条条线构成的，因而大家会采用下列好多个方式 ：

beginPath() ：刚开始一条相对路径或重设当今的相对路径moveTo()：把相对路径挪动到画板中的特定点，不建立线框lineTo()：加上一个新点，随后在画板中建立从该点至最终特定点的线框stroke()：绘图已界定的相对路径closePath()：建立从当今点返回起止点的相对路径恶性事件

要想在canvas中制图，还必须关联好多个特殊的恶性事件，而这种恶性事件在pc端和移动端各有不同

pc端恶性事件

mousedownmousemovemouseup移动端恶性事件

touchstarttouchmovetouchend关键编码

复位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//签字标识};},

文章转载自网络，如有侵权，请联系api@1dq.com删除