家政微信小程序_使用vue完成一个电子签名组件的示例代码

使用vue实现一个电子签名组件的示例代码       这篇文章主要介绍了使用vue实现一个电子签名组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

canvas

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

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

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

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

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

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

事件

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

pc端事件

mousedown mousemove mouseup

手机端事件

touchstart touchmove touchend

核心代码

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

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


相关阅读