Wie implementiert man eine elektronische Signaturkomponente in Vue?

Der Ort, an dem wir im Leben elektronische Signaturen wahrscheinlich am häufigsten verwenden, ist die Bank, bei der Sie jedes Mal Ihren Namen hinterlassen können. Heute werden wir Vue verwenden, um ein elektronisches Signaturpanel zu implementieren.

Wenn Sie Grafiken zeichnen möchten, fällt uns als Erstes die Verwendung des Tags canvas ein, den wir im vorherigen Artikel verwendet haben canvasImplementierte eine Front-End-Komponente, die grafische Verifizierungscodes generiert. Sie wird als nicht sicher genug kritisiert, daher wird diese elektronische Signaturkomponente definitiv nicht kritisiert~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

canvas

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;
  }

canvas-Tag selbst verfügt über keine Zeichenfunktionen und alle Zeichenarbeiten müssen innerhalb von JavaScript durchgeführt werden.

Es sind mehrere Schritte erforderlich, um canvas zum Zeichnen zu verwenden:

1. Canvas-Element abrufen
2. Kontextobjekt über das Canvas-Element erstellen
3. Übergeben Sie ein Kontextobjekt, um Grafiken zu zeichnen

Da die Signatur tatsächlich aus Zeilen besteht, verwenden wir in den aktuellen Anforderungen für elektronische Signaturen die folgenden Methoden:

1. beginPath ( ): Starten Sie einen Pfad oder setzen Sie den aktuellen Pfad zurück
2. moveTo(): ​​​​Verschieben Sie den Pfad zum angegebenen Punkt im Canvas, ohne eine Linie zu erstellen
3. lineTo(): ​​​​Fügen Sie einen neuen Punkt hinzu und erstellen Sie dann eine Linie von diesem Punkt zum letzten angegebenen Punkt in der Leinwand
4. Stroke(): Zeichnen Sie einen definierten Pfad
5. closePath(): Erstellen Sie eine Linie ausgehend vom aktuellen Punkt Pfad zum Startpunkt

Ereignis

Wenn Sie in Leinwand zeichnen möchten, Sie Sie müssen mehrere spezifische Ereignisse binden, und diese Ereignisse unterscheiden sich auf der PC-Seite und der mobilen Seite >mousemovemouseup

Mobile Veranstaltung

• touchstart
• touchmove li>
• touchend

Kerncode

Initialisieren Sie die Leinwand Code> markieren und binden Ereignisse

//电脑设备事件
    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;
    },

Holen Sie sich den Pinsel

Initialisiert im montierten Lebenszyklus

//移动设备事件
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);//记录点
  }
},

Ereignisbehandlung

mouseDown

//电脑设备事件
    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);//记录点
      }
    },

touchStart

//移动设备事件
    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);//记录点
      }
    },

mouseMove

//电脑设备事件
    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;
      }
    },

touchMove

//移动设备事件
    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 });//记录点
      }
    },

mouseUp

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

Rewrite

Ich habe festgestellt, dass ich einen Tippfehler gemacht, das Zeichenbrett gelöscht und neu geschrieben habe

rrreee

Die verwendeten Datenrrreee

Verwandte Empfehlungen:

Zusammenfassung der Front-End-Vue-Interviewfragen im Jahr 2020 (mit Antworten)

🎜🎜🎜Vue-Tutorial-Empfehlung: 2020 neueste 5 vue.js-Video-Tutorial-Auswahl🎜🎜🎜🎜Für weitere programmierbezogene Kenntnisse Bitte besuchen Sie: 🎜Einführung in die Programmierung🎜! ! 🎜🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man eine elektronische Signaturkomponente in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!