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

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

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

canvas

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

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标签并绑定事件

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

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