本文转载于 SegmentFault 社区

作者：我的小熊不见了

---

使用 vue 实现一个电子签名组件

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

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

No.1

canvas

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

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

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

•  获取 canvas 元素

• 通过 canvas 元素创建 context 对象

• 通过 context 对象来绘制图形

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

• beginPath() ：开始一条路径或重置当前的路径

• moveTo()：把路径移动到画布中的指定点，不创建线条

• lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条

• stroke()：绘制已定义的路径

• closePath()：创建从当前点回到起始点的路径

No.2

事件

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

pc 端事件

• mousedown
• mousemove
• mouseup

手机端事件

• touchstart
• touchmove
• touchend

No.3

核心代码

初始化 canvas 标签并绑定事件

        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
        ref="canvasF"
        @mousedown="mouseDown"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      >

获取画笔

在 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