Vue dan Canvas: Cara melaksanakan fungsi pengecaman tandatangan dan gerak isyarat tulisan tangan

Vue dan Canvas: Cara melaksanakan fungsi tanda tangan dan pengecaman gerak isyarat tulisan tangan

Pengenalan:
Fungsi pengecaman isyarat dan tanda tangan tulisan tangan semakin biasa dalam aplikasi moden, dan ia boleh menyediakan pengguna dengan cara interaksi yang lebih intuitif dan semula jadi. Sebagai rangka kerja bahagian hadapan yang popular, Vue.js boleh mencapai kedua-dua fungsi ini dengan elemen Kanvas. Artikel ini akan memperkenalkan cara menggunakan elemen Vue.js dan Canvas untuk melaksanakan tandatangan tulisan tangan dan fungsi pengecaman gerak isyarat serta memberikan contoh kod yang sepadan.

1. Pelaksanaan fungsi tandatangan tulisan tangan

Untuk melaksanakan fungsi tandatangan tulisan tangan, kita perlu mencipta komponen Vue yang mengandungi elemen Kanvas. Dalam komponen ini, kami akan melaksanakan fungsi untuk pengguna melukis tandatangan pada Kanvas.

<template>
  <div>
    <h1 id="手写签名">手写签名</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>

Dalam kod ini, kami mula-mula mentakrifkan dua atribut data, isDrawing dan signatureData, untuk merekodkan sama ada pengguna sedang melukis dan menyimpan data tandatangan. Dalam kaedah startDrawing, kami mendengar acara tekan tetikus, mendapatkan konteks elemen Kanvas, dan mula melukis laluan. Dalam kaedah lukisan, kami mengemas kini laluan lukisan dalam masa nyata sehingga tetikus dilepaskan. Dalam kaedah stopDrawing, kami menetapkan isDrawing kepada false untuk berhenti melukis laluan. Kaedah clearCanvas digunakan untuk mengosongkan kandungan pada Kanvas. Kaedah saveSignature menukarkan kandungan Kanvas kepada data berkod base64 dan menyimpannya ke signatureData.

2. Pelaksanaan fungsi pengecaman gerak isyarat

Untuk melaksanakan fungsi pengecaman gerak isyarat, kami boleh menggunakan perpustakaan pihak ketiga seperti Hammer.js untuk mengendalikan acara sentuhan dan bekerjasama dengan Kanvas untuk merealisasikan lukisan gerak isyarat dan pengecaman.

Mula-mula, pasang pustaka Hammer.js dalam projek:

npm install hammerjs --save

Kemudian, import pustaka Hammer.js dalam komponen Vue dan gunakannya untuk mengendalikan acara gerak isyarat:

<template>
  <div>
    <h1 id="手势识别">手势识别</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>

Dalam kod ini, kami mula-mula mengimport Hammer.js perpustakaan, dan cipta objek Hammer dalam fungsi cangkuk yang dipasang bagi komponen Vue, dan nyatakan jenis gerak isyarat yang perlu dikenali. Kemudian, kami menggunakan kaedah mc.on untuk mendengar peristiwa gerak isyarat, dan dalam fungsi panggil balik yang sepadan, kosongkan kandungan pada Kanvas dan lukis jenis gerak isyarat.

Kesimpulan:
Dengan menggabungkan elemen Vue.js dan Canvas, kami boleh melaksanakan fungsi tanda tangan dan pengecaman gerak isyarat tulisan tangan dengan mudah. Fungsi tandatangan tulisan tangan boleh memberikan pengguna cara yang lebih intuitif dan semula jadi untuk menandatangani, manakala fungsi pengecaman isyarat boleh menyediakan pengguna dengan cara interaksi yang lebih bebas dan intuitif. Semoga artikel ini bermanfaat kepada anda, terima kasih kerana membaca!

Rujukan:

1. Dokumentasi rasmi Vue: https://vuejs.org/
2. Dokumentasi rasmi kanvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
.
3. Hammer dokumentasi rasmi js: https://hammerjs.github.io/

Atas ialah kandungan terperinci Vue dan Canvas: Cara melaksanakan fungsi pengecaman tandatangan dan gerak isyarat tulisan tangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!