Vue et Canvas : Comment implémenter des fonctions de signature manuscrite et de reconnaissance gestuelle

Vue et Canvas : Comment implémenter les fonctions de signature manuscrite et de reconnaissance gestuelle

Introduction :
Les fonctions de signature manuscrite et de reconnaissance gestuelle sont de plus en plus courantes dans les applications modernes, et elles peuvent offrir aux utilisateurs un moyen d'interaction plus intuitif et naturel. En tant que framework frontal populaire, Vue.js peut réaliser ces deux fonctions avec l'élément Canvas. Cet article expliquera comment utiliser les éléments Vue.js et Canvas pour implémenter les fonctions de signature manuscrite et de reconnaissance gestuelle, et donnera des exemples de code correspondants.

1. Implémentation de la fonction de signature manuscrite

Pour implémenter la fonction de signature manuscrite, nous devons d'abord créer un composant Vue contenant l'élément Canvas. Dans ce composant, nous implémenterons la fonction permettant aux utilisateurs de dessiner des signatures sur Canvas.

<template>
  <div>
    <h1>手写签名</h1>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="drawing" @mouseup="stopDrawing"></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveSignature">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      signatureData: null
    }
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
    },
    drawing(event) {
      if (!this.isDrawing) return;
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.lineTo(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
      ctx.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    clearCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    saveSignature() {
      const canvas = this.$refs.canvas;
      this.signatureData = canvas.toDataURL();
    }
  }
}
</script>

<style scoped>
canvas {
  border: 1px solid black;
}
</style>

Dans ce code, nous définissons d'abord deux attributs de données, isDrawing et signatureData, pour enregistrer si l'utilisateur dessine et enregistre les données de signature. Dans la méthode startDrawing, nous écoutons l'événement de pression de la souris, obtenons le contexte de l'élément Canvas et commençons à dessiner le chemin. Dans la méthode de dessin, nous mettons à jour le chemin de dessin en temps réel jusqu'à ce que la souris soit relâchée. Dans la méthode stopDrawing, nous définissons isDrawing sur false pour arrêter de dessiner le chemin. La méthode clearCanvas est utilisée pour effacer le contenu du canevas. La méthode saveSignature convertit le contenu du Canvas en données codées en base64 et l'enregistre dans signatureData.

2. Implémentation de la fonction de reconnaissance gestuelle

Pour implémenter la fonction de reconnaissance gestuelle, nous pouvons utiliser des bibliothèques tierces telles que Hammer.js pour gérer les événements tactiles et coopérer avec Canvas pour réaliser le dessin et la reconnaissance gestuelle.

Tout d'abord, installez la bibliothèque Hammer.js dans le projet :

npm install hammerjs --save

Ensuite, importez la bibliothèque Hammer.js dans le composant Vue et utilisez-la pour gérer les événements gestuels :

<template>
  <div>
    <h1>手势识别</h1>
    <canvas ref="canvas"></canvas>
    <button @click="recognizeGesture">识别</button>
  </div>
</template>

<script>
import Hammer from 'hammerjs';

export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const mc = new Hammer(canvas);

    mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

    mc.on('swiperight swipeleft swipeup swipedown', function (event) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillText(event.type, canvas.width / 2, canvas.height / 2);
    });
  }
}
</script>

<style scoped>
canvas {
  border: 1px solid black;
}
</style>

Dans ce code, nous importons d'abord Hammer.js bibliothèque, créez un objet Hammer dans la fonction hook montée du composant Vue et spécifiez le type de geste qui doit être reconnu. Ensuite, nous utilisons la méthode mc.on pour écouter les événements de geste, et dans la fonction de rappel correspondante, effaçons le contenu sur le canevas et dessinons le type de geste.

Conclusion :
En combinant des éléments Vue.js et Canvas, nous pouvons facilement implémenter des fonctions de signature manuscrite et de reconnaissance gestuelle. La fonction de signature manuscrite peut offrir aux utilisateurs une manière plus intuitive et naturelle de signer, tandis que la fonction de reconnaissance gestuelle peut offrir aux utilisateurs une manière d'interaction plus libre et intuitive. J'espère que cet article vous sera utile, merci d'avoir lu !

Matériaux de référence :

1. Documentation officielle de Vue : https://vuejs.org/
2. Documentation officielle de Canvas : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
3. Hammer Documentation officielle .js : https://hammerjs.github.io/

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!