溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

使用vue實(shí)現(xiàn)一個(gè)電子簽名組件的示例代碼

發(fā)布時(shí)間：2020-10-12 10:34:06 來(lái)源：腳本之家 閱讀：176 作者：我的小熊不見(jiàn)了 欄目：web開(kāi)發(fā)

在生活中我們使用到電子簽名最多的地方可能就是銀行了，每次都會(huì)讓你留下大名。今天我們就要用vue實(shí)現(xiàn)一個(gè)電子簽名的面板

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

canvas

<canvas> 標(biāo)簽是 HTML 5 中的新標(biāo)簽。
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來(lái)繪制圖形。

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

使用canvas繪圖有幾個(gè)必要的步驟：

  1. 獲取canvas元素
  2. 通過(guò)canvas元素創(chuàng)建context對(duì)象
  3. 通過(guò)context對(duì)象來(lái)繪制圖形

在當(dāng)前電子簽名需求中，由于簽名其實(shí)是由一條條線(xiàn)組成的，因此我們會(huì)用到以下幾個(gè)方法：

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

事件

想要在canvas中繪圖，還需要綁定幾個(gè)特定的事件，而這些事件在pc端和手機(jī)端不盡相同

pc端事件

  • mousedown
  • mousemove
  • mouseup

手機(jī)端事件

  • touchstart
  • touchmove
  • touchend

核心代碼

初始化canvas標(biāo)簽并綁定事件

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

獲取畫(huà)筆

在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();//開(kāi)始作畫(huà)
   this.points.push(obj);//記錄點(diǎn)
   this.isDown = true;
  },

touchStart

//移動(dòng)設(shè)備事件
  touchStart(ev) {
   ev = ev || event;
   ev.preventDefault();
   if (ev.touches.length == 1) {
    this.isDraw = true; //簽名標(biāo)記
    let obj = {
     x: ev.targetTouches[0].clientX,
     y:
      ev.targetTouches[0].clientY -
      (document.body.offsetHeight * 0.5 +
       this.$refs.canvasHW.offsetHeight * 0.1)
    }; //y的計(jì)算值中：document.body.offsetHeight*0.5代表的是除了整個(gè)畫(huà)板signatureBox剩余的高，this.$refs.canvasHW.offsetHeight*0.1是畫(huà)板中標(biāo)題的高
    this.startX = obj.x;
    this.startY = obj.y;
    this.canvasTxt.beginPath();//開(kāi)始作畫(huà)
    this.points.push(obj);//記錄點(diǎn)
   }
  },

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);//移動(dòng)畫(huà)筆
    this.canvasTxt.lineTo(obj.x, obj.y);//創(chuàng)建線(xiàn)條
    this.canvasTxt.stroke();//畫(huà)線(xiàn)
    this.startY = obj.y;
    this.startX = obj.x;
    this.points.push(obj);//記錄點(diǎn)
   }
  },

touchMove

//移動(dòng)設(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);//移動(dòng)畫(huà)筆
    this.canvasTxt.lineTo(obj.x, obj.y);//創(chuàng)建線(xiàn)條
    this.canvasTxt.stroke();//畫(huà)線(xiàn)
    this.startY = obj.y;
    this.startX = obj.x;
    this.points.push(obj);//記錄點(diǎn)
   }
  },

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);//記錄點(diǎn)
    this.points.push({ x: -1, y: -1 });
    this.isDown = false;
   }
  },

touchEnd

//移動(dòng)設(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);//記錄點(diǎn)
    this.points.push({ x: -1, y: -1 });//記錄點(diǎn)
   }
  },

重寫(xiě)

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

//重寫(xiě)
  overwrite() {
   this.canvasTxt.clearRect(
    0,
    0,
    this.$refs.canvasF.width,
    this.$refs.canvasF.height
   );
   this.points = [];
   this.isDraw = false; //簽名標(biāo)記
  },

用到的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 //簽名標(biāo)記
  };
 },

使用vue實(shí)現(xiàn)一個(gè)電子簽名組件的示例代碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手