在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板
想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件想必不会被吐槽了吧~
canvas
<canvas> 标签是 html 5 中的新标签。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
canvas标签本身是没有绘图能力的,所有的绘制工作必须在 javascript 内部完成。
使用canvas绘图有几个必要的步骤:
在当前电子签名需求中,由于签名其实是由一条条线组成的,因此我们会用到以下几个方法:
事件
想要在canvas中绘图,还需要绑定几个特定的事件,而这些事件在pc端和手机端不尽相同
pc端事件
手机端事件
核心代码
初始化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 //签名标记 }; },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
【第138期】 游戏策划:应聘前HR要求把游戏玩到30级,怎么玩?
网友评论