uniappにジェスチャーパスワード機能を実装する方法

uniapp でジェスチャー パスワード機能を実装する方法

ジェスチャー パスワードは携帯電話のロックを解除する一般的な方法であり、uniapp が開発したモバイル アプリケーションでも使用できます。 uniappでは、キャンバスを利用してジェスチャーパスを描画し、ユーザーのジェスチャー操作を監視することでジェスチャーパスワード機能を実装することができます。この記事では、uniapp にジェスチャー パスワード機能を実装する方法と、関連するコード例を紹介します。

1. ページ構造の作成

まず、canvas 要素を含むページ構造を作成する必要があります。ページ ディレクトリに新しい GestureLock フォルダーを作成し、このフォルダーに GestureLock.vue ファイルを作成します。 GestureLock.vue ファイルに、次のコードを追加します。

<template>
  <view class="container">
    <canvas 
      ref="gestureCanvas" 
      canvas-id="gestureCanvas"
      :style="{ width: '100%', height: '100%' }"
    ></canvas>
  </view>
</template>

<script>
export default {
  onLoad() {
    const query = uni.createSelectorQuery().in(this);
    query.select('.container')
      .boundingClientRect((res) => {
        const canvasWidth = res.width;
        const canvasHeight = res.height;
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        this.ctx = uni.createCanvasContext('gestureCanvas');

        // 绘制初始画面
        this.drawBackground();
      })
      .exec();
  },
  methods: {
    // 绘制背景
    drawBackground() {
      this.ctx.setFillStyle('#F5F5F5');
      this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
      this.ctx.draw();
    },
  },
};
</script>

<style>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

上記のコードでは、canvas 要素をページに追加し、ref 属性を通じて要素の参照名をgestureCanvasとして指定しました。また、canvas 要素の ID は、canvas-id 属性を通じて、gestureCanvas として指定されます。コンポーネントの onLoad メソッドでは、uni.createSelectorQuery().in(this) を使用してキャンバス要素の幅と高さを取得し、コンポーネントのデータに格納します。コンポーネントのメソッドでは、キャンバス上に灰色の背景を描画するために使用される背景描画メソッドdrawBackground()を定義します。

2. ジェスチャー操作を聞く

次に、指の押し、動き、放すなどのユーザーのジェスチャー操作を監視する必要があります。この機能は、uniapp のジェスチャ イベントを通じて実現できます。 GestureLock.vue ファイルのメソッドに、次のコードを追加します。

methods: {
  // ...

  // 手指按下事件
  onTouchStart(event) {
    const touch = event.touches[0];
    const startX = touch.clientX;
    const startY = touch.clientY;
    // ...
  },

  // 手指移动事件
  onTouchMove(event) {
    const touch = event.touches[0];
    const moveX = touch.clientX;
    const moveY = touch.clientY;
    // ...
  },

  // 手指松开事件
  onTouchEnd() {
    // ...
  },
},

上記のコードでは、指を押すイベント、指を動かすイベント、指を離すイベントに対応する 3 つのメソッドがメソッドに追加されます。指を押すイベントでは、event.touches[0] を通じて現在の指の位置を取得し、後で使用できるように startX 変数と startY 変数に保存します。指の動きイベントでは、event.touches[0] を通じて現在の指の位置を取得し、後で使用できるように moveX および moveY 変数に保存します。指を離したイベントでは、ジェスチャー パスワードを確認できます。

3. ジェスチャー パスを描画する

次のステップでは、キャンバス上にジェスチャー パスを描画する必要があります。 GestureLock.vue ファイルのメソッドに、次のコードを追加します。

methods: {
  // ...

  // 绘制手势路径
  drawGesturePath() {
    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    this.drawBackground();
    
    // ...

    this.ctx.setStrokeStyle('#337ab7');
    this.ctx.setLineWidth(3);
    this.ctx.setLineCap('round');
    this.ctx.setLineJoin('round');

    for (let i = 0; i < this.gesturePath.length - 1; i++) {
      const pointA = this.gesturePath[i];
      const pointB = this.gesturePath[i + 1];

      this.ctx.beginPath();
      this.ctx.moveTo(pointA.x, pointA.y);
      this.ctx.lineTo(pointB.x, pointB.y);
      this.ctx.stroke();
    }

    this.ctx.draw(true);
  },
},

上記のコードでは、drawGesturePath メソッドで、最初に this.ctx.clearRect() メソッドを使用して、ファイル上のコンテンツをクリアします。 Canvas を作成し、drawBackground メソッドを呼び出して灰色の背景を描画します。次に、 this.ctx.setStrokeStyle() メソッドを使用して線の色を設定し、 this.ctx.setLineWidth() メソッドを使用して線の幅を設定し、 this.ctx.setLineCap() メソッドを使用して線のエンドポイント スタイルを設定し、これを使用します。ctx.setLineJoin() メソッドは、線の接続スタイルを設定します。次に、gesturePath 配列をトラバースすることによって、ジェスチャ パスの各線分が順番に描画されます。最後に、this.ctx.draw(true) メソッドを使用して、キャンバス上に描画された内容をリアルタイムで表示します。

4. 完全なジェスチャー パスワード機能の実装

最後に、前のコードを統合して、完全なジェスチャー パスワード機能を実現します。 GestureLock.vue ファイルに、次のコードを追加します。

<template>
  <view class="container">
    <canvas 
      ref="gestureCanvas" 
      canvas-id="gestureCanvas"
      :style="{ width: '100%', height: '100%' }"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    ></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      canvasWidth: 0,
      canvasHeight: 0,
      ctx: null,
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
      gesturePath: [], // 手势路径的点集合
    };
  },
  onLoad() {
    const query = uni.createSelectorQuery().in(this);
    query.select('.container')
      .boundingClientRect((res) => {
        const canvasWidth = res.width;
        const canvasHeight = res.height;
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        this.ctx = uni.createCanvasContext('gestureCanvas');

        // 绘制初始画面
        this.drawBackground();
      })
      .exec();
  },
  methods: {
    // 绘制背景
    drawBackground() {
      this.ctx.setFillStyle('#F5F5F5');
      this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
      this.ctx.draw();
    },

    // 手指按下事件
    onTouchStart(event) {
      const touch = event.touches[0];
      this.startX = touch.clientX;
      this.startY = touch.clientY;
      this.gesturePath.push({ x: this.startX, y: this.startY });
    },

    // 手指移动事件
    onTouchMove(event) {
      const touch = event.touches[0];
      this.moveX = touch.clientX;
      this.moveY = touch.clientY;
      this.gesturePath.push({ x: this.moveX, y: this.moveY });
      this.drawGesturePath();
    },

    // 手指松开事件
    onTouchEnd() {
      // 进行手势密码的验证
      console.log(this.gesturePath);
    },

    // 绘制手势路径
    drawGesturePath() {
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      this.drawBackground();

      this.ctx.setStrokeStyle('#337ab7');
      this.ctx.setLineWidth(3);
      this.ctx.setLineCap('round');
      this.ctx.setLineJoin('round');

      for (let i = 0; i < this.gesturePath.length - 1; i++) {
        const pointA = this.gesturePath[i];
        const pointB = this.gesturePath[i + 1];

        this.ctx.beginPath();
        this.ctx.moveTo(pointA.x, pointA.y);
        this.ctx.lineTo(pointB.x, pointB.y);
        this.ctx.stroke();
      }

      this.ctx.draw(true);
    },
  },
};
</script>

<style>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

上記のコードでは、canvas 要素に 3 つのジェスチャ イベント リスナー (@touchstart、@touchmove、@touchend) を追加しました。対応するイベント処理メソッドでは、指の位置の取得と保存、ジェスチャ パスの描画とリアルタイム更新などの関連操作を実行しました。指を離したイベントでは、ユーザーが描いたジェスチャー パスが要件を満たしているか、事前に設定されたジェスチャー パスワードと一致しているかどうかを判断するなど、ジェスチャー パスワードを検証できます。

上記の手順により、uniapp にジェスチャー パスワード機能を実装できます。ユーザーが指を押して動かすと、ジェスチャー パスがリアルタイムでキャンバス上に表示され、ユーザーが指を離すと、ジェスチャー パスに基づいて対応する検証操作を実行できます。この記事が、uniapp でのジェスチャー パスワード機能の実装に役立つことを願っています。ご質問がある場合は、ディスカッションのためにメッセージを残してください。

以上がuniappにジェスチャーパスワード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。