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

touchEnd

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

重寫

發現自己寫錯字了，擦掉畫板重新寫過rrreee用到的datarrreee

相關推薦：

2020年前端vue面試題大匯總（附答案）

vue教學推薦：2020最新的5個vue.js影片教學精選

更多程式相關知識，請造訪：###程式設計入門###！ ！ ######

以上是vue如何實作一個電子簽名元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！