Vue and Canvas: How to implement handwritten signature and gesture recognition functions

Vue and Canvas: How to implement handwriting signature and gesture recognition functions

Introduction:
Handwriting signature and gesture recognition functions are becoming more and more common in modern applications, and they can provide users with more intuitive and natural mode of interaction. As a popular front-end framework, Vue.js can achieve these two functions with the Canvas element. This article will introduce how to use Vue.js and Canvas elements to implement handwriting signature and gesture recognition functions, and give corresponding code examples.

1. Implementation of handwritten signature function

To implement the handwritten signature function, we first need to create a Vue component containing a Canvas element. In this component, we will implement the function for users to draw signatures on 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>

In this code, we first define two data attributes, isDrawing and signatureData, to record whether the user is drawing and saving signature data. In the startDrawing method, we listen to the mouse press event, obtain the context of the Canvas element, and start drawing the path. In the drawing method, we update the drawing path in real time until the mouse is released. In the stopDrawing method, we set isDrawing to false to stop drawing the path. The clearCanvas method is used to clear the content on the Canvas. The saveSignature method converts the contents of the Canvas into base64-encoded data and saves it to signatureData.

2. Gesture recognition function implementation

To implement the gesture recognition function, we can use a third-party library such as Hammer.js to handle touch events, and cooperate with Canvas to realize gesture drawing and recognition.

First, install the Hammer.js library in the project:

npm install hammerjs --save

Then, import the Hammer.js library in the Vue component and use it to handle gesture events:

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

In this code, we first import the Hammer.js library, create a Hammer object in the mounted hook function of the Vue component, and specify the gesture type that needs to be recognized. Then, we use the mc.on method to listen for gesture events, and in the corresponding callback function, clear the content on the Canvas and draw the gesture type.

Conclusion:
By combining Vue.js and Canvas elements, we can easily implement handwritten signature and gesture recognition functions. The handwriting signature function can provide users with a more intuitive and natural way to sign, while the gesture recognition function can provide users with a more free and intuitive way of interaction. Hope this article is helpful to you, thank you for reading!

Reference materials:

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

The above is the detailed content of Vue and Canvas: How to implement handwritten signature and gesture recognition functions. For more information, please follow other related articles on the PHP Chinese website!