Vue と Canvas: 手書き署名とジェスチャ認識機能を実装する方法-Vue.js-php.cn

Vue と Canvas: 手書き署名とジェスチャ認識機能を実装する方法

PHPz

リリース： 2023-07-18 08:49:38

オリジナル

1188 人が閲覧しました

Vue と Canvas: 手書き署名およびジェスチャ認識関数を実装する方法

はじめに:
手書き署名およびジェスチャ認識関数は、最新のアプリケーションでますます一般的になってきており、ユーザーにさらに多くの機能を提供できます。直感的で自然なインタラクションモード。人気のあるフロントエンドフレームワークである Vue.js は、Canvas 要素を使用してこれら 2 つの機能を実現できます。この記事では、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>

ログイン後にコピー

このコードでは、まず、ユーザーが署名データを描画および保存しているかどうかを記録するために、isDrawing と SignatureData という 2 つのデータ属性を定義します。 startDrawing メソッドでは、マウスプレスイベントをリッスンし、Canvas 要素のコンテキストを取得して、パスの描画を開始します。描画メソッドでは、マウスを放すまでリアルタイムで描画パスを更新します。 stopDrawing メソッドでは、isDrawing を false に設定して、パスの描画を停止します。 clearCanvas メソッドは、Canvas 上のコンテンツをクリアするために使用されます。 saveSignature メソッドは、Canvas の内容を Base64 でエンコードされたデータに変換し、signatureData に保存します。

2. ジェスチャー認識機能の実装

ジェスチャー認識機能を実装するには、Hammer.js などのサードパーティ製ライブラリを使用してタッチイベントを処理し、Canvas と連携してジェスチャーを実現します。描画と認識。

まず、プロジェクトに Hammer.js ライブラリをインストールします:

npm install hammerjs --save

ログイン後にコピー

次に、Hammer.js ライブラリを Vue コンポーネントにインポートし、それを使用してジェスチャイベントを処理します:

<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 要素を組み合わせることで、手書き署名やジェスチャ認識機能を簡単に実装できます。手書き署名機能は、より直感的で自然な署名方法をユーザーに提供し、ジェスチャー認識機能は、より自由で直感的な対話方法をユーザーに提供します。この記事がお役に立てば幸いです、読んでいただきありがとうございます!

参考資料: