Vue 및 Canvas: 필기 서명 및 동작 인식 기능을 구현하는 방법-View.js-php.cn

Vue 및 Canvas: 필기 서명 및 동작 인식 기능을 구현하는 방법

PHPz

풀어 주다： 2023-07-18 08:49:38

원래의

1197명이 탐색했습니다.

Vue 및 Canvas: 필기 서명 및 동작 인식 기능 구현 방법

소개:
손글씨 서명 및 동작 인식 기능은 최신 애플리케이션에서 점점 더 보편화되고 있으며 사용자에게 보다 직관적이고 자연스러운 상호 작용 방식을 제공할 수 있습니다. 널리 사용되는 프런트엔드 프레임워크인 Vue.js는 Canvas 요소를 사용하여 이 두 가지 기능을 달성할 수 있습니다. 이 기사에서는 Vue.js 및 Canvas 요소를 사용하여 필기 서명 및 동작 인식 기능을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1. 자필 서명 기능 구현

자필 서명 기능을 구현하려면 먼저 Canvas 요소가 포함된 Vue 구성 요소를 만들어야 합니다. 이번 컴포넌트에서는 사용자가 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>

로그인 후 복사

이 코드에서는 먼저 사용자가 서명 데이터를 그리고 저장하는지 여부를 기록하기 위해 is드로잉과 서명데이터라는 두 가지 데이터 속성을 정의합니다. start드로잉 메소드에서는 마우스 누르기 이벤트를 수신하고 캔버스 요소의 컨텍스트를 얻은 후 경로 그리기를 시작합니다. 그리기 방법에서는 마우스를 놓을 때까지 실시간으로 그리기 경로를 업데이트합니다. stop드로잉 메소드에서는 경로 그리기를 중지하기 위해 is드로잉을 false로 설정했습니다. ClearCanvas 메소드는 캔버스의 내용을 지우는 데 사용됩니다. saveSignature 메소드는 Canvas의 내용을 base64로 인코딩된 데이터로 변환하고 이를 SignatureData에 저장합니다.

2. 제스처 인식 기능 구현

제스처 인식 기능을 구현하려면 Hammer.js와 같은 타사 라이브러리를 사용하여 터치 이벤트를 처리하고 Canvas와 협력하여 제스처 그리기 및 인식을 실현할 수 있습니다.

먼저 프로젝트에 Hammer.js 라이브러리를 설치합니다.

npm install hammerjs --save

로그인 후 복사

그런 다음 Vue 구성 요소에서 Hammer.js 라이브러리를 가져오고 이를 사용하여 제스처 이벤트를 처리합니다.

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

로그인 후 복사

이 코드에서는 먼저 Hammer.js를 가져옵니다. 라이브러리를 만들고 Vue 컴포넌트의 마운트된 후크 기능에 Hammer 객체를 생성하고 인식해야 하는 제스처 유형을 지정합니다. 그런 다음 mc.on 메서드를 사용하여 제스처 이벤트를 수신하고 해당 콜백 함수에서 Canvas의 콘텐츠를 지우고 제스처 유형을 그립니다.

결론:
Vue.js와 Canvas 요소를 결합하면 필기 서명 및 동작 인식 기능을 쉽게 구현할 수 있습니다. 필기 서명 기능은 사용자에게 보다 직관적이고 자연스러운 서명 방법을 제공할 수 있으며, 제스처 인식 기능은 사용자에게 보다 자유롭고 직관적인 상호 작용 방법을 제공할 수 있습니다. 이 글이 여러분에게 도움이 되기를 바랍니다. 읽어주셔서 감사합니다!

참고 자료: