Comment implémenter un composant de signature électronique dans Vue ?

L'endroit où nous utilisons le plus les signatures électroniques est probablement la banque, qui vous permettra de laisser votre nom à chaque fois. Aujourd'hui, nous allons utiliser vue pour implémenter un panneau de signature électronique

Si vous souhaitez dessiner des graphiques, la première étape qui vous vient à l'esprit est d'utiliser la balise canvas Dans l'article précédent, nous avons utilisé <.> pour mettre en œuvre une génération front-end Le composant du code de vérification graphique est critiqué pour ne pas être assez sûr, donc ce composant de signature électronique ne sera certainement pas critiqué~canvas

canvas

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

La balise elle-même n'a aucune capacité de dessin, le travail de dessin doit donc être effectué dans JavaScript. canvas

Il y a plusieurs étapes nécessaires pour dessiner à l'aide de

 : canvas

Obtenir l'élément de toile
Créer un objet contextuel via l'élément de toile
Par le contexte Objet pour dessiner des graphiques

Dans les exigences actuelles de signature électronique, puisque la signature est en fait composée de lignes, nous utiliserons les méthodes suivantes :

beginPath() : Start un chemin ou réinitialiser le chemin actuel
moveTo() : ​Déplacer le chemin vers le point spécifié dans le canevas sans créer de ligne
lineTo() : ​​Ajouter un nouveau point, puis créez une ligne de ce point au dernier point spécifié dans le canevas
Stroke() : trace un chemin défini
closePath() : crée un chemin depuis le point actuel vers le point de départ

Événements

Si vous souhaitez dessiner dans

, vous devez lier plusieurs événements spécifiques, et ces événements sont différents sur PC et mobilescanvas

Événement PC

mousedown
mousemove
mouseup

Événement mobile

touchstart
touchmove
touchend

Core code

Initialisez la balise

et liez l'événementcanvas

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

Get Brush

initialisé dans le

cycle de viemounted

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

gestionnaire d'événements

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 });//记录点
      }
    },

Réécrire

J'ai découvert que j'avais fait une faute de frappe, alors j'ai effacé la planche à dessin et je l'ai réécrite

//重写
    overwrite() {
      this.canvasTxt.clearRect(
        0,
        0,
        this.$refs.canvasF.width,
        this.$refs.canvasF.height
      );
      this.points = [];
      this.isDraw = false; //签名标记
    },

données utilisées

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

Recommandations associées :

Résumé 2020 de questions d'entretien Front-end Vue (avec réponses)

Recommandation du didacticiel Vue : 2020 dernières sélections de didacticiels vidéo 5 vue.js

Pour en savoir plus connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!