vue實現(xiàn)一個電子簽名組件的示例

這篇文章將為大家詳細講解有關(guān)vue實現(xiàn)一個電子簽名組件的示例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設(shè)、網(wǎng)站制作與策劃設(shè)計,宣化網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:宣化等地區(qū)。宣化做網(wǎng)站價格咨詢:028-86922220

想要繪制圖形，第一步想到的就是使用canvas標簽，在之前的文章里我們使用canvas實現(xiàn)了一個前端生成圖形驗證碼的組件，被吐槽不夠安全，那么這個電子簽名組件想必不會被吐槽了吧~

canvas

<canvas> 標簽是 HTML 5 中的新標簽。<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。

canvas標簽本身是沒有繪圖能力的，所有的繪制工作必須在 JavaScript 內(nèi)部完成。

使用canvas繪圖有幾個必要的步驟：

  1. 獲取canvas元素
  2. 通過canvas元素創(chuàng)建context對象
  3. 通過context對象來繪制圖形

在當前電子簽名需求中，由于簽名其實是由一條條線組成的，因此我們會用到以下幾個方法：

  1. beginPath() ：開始一條路徑或重置當前的路徑
  2. moveTo()：把路徑移動到畫布中的指定點，不創(chuàng)建線條
  3. lineTo()：添加一個新點，然后在畫布中創(chuàng)建從該點到最后指定點的線條
  4. stroke()：繪制已定義的路徑
  5. closePath()：創(chuàng)建從當前點回到起始點的路徑

事件

想要在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
//電腦設(shè)備事件
    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
//移動設(shè)備事件
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
//電腦設(shè)備事件
    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);//創(chuàng)建線條
        this.canvasTxt.stroke();//畫線
        this.startY = obj.y;
        this.startX = obj.x;
        this.points.push(obj);//記錄點
      }
    },
touchMove
//移動設(shè)備事件
    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);//創(chuàng)建線條
        this.canvasTxt.stroke();//畫線
        this.startY = obj.y;
        this.startX = obj.x;
        this.points.push(obj);//記錄點
      }
    },
mouseUp
//電腦設(shè)備事件
    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
//移動設(shè)備事件
    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 });//記錄點
      }
    },

重寫

發(fā)現(xiàn)自己寫錯字了，擦掉畫板重新寫過

//重寫
    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 //簽名標記
    };
  },

vue實現(xiàn)一個電子簽名組件的示例

關(guān)于vue實現(xiàn)一個電子簽名組件的示例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享文章：vue實現(xiàn)一個電子簽名組件的示例
文章起源：http://bm7419.com/article40/ijhcho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、App設(shè)計、網(wǎng)站改版、ChatGPT、外貿(mào)建站、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化