Comment implémenter la fonction de mot de passe gestuel dans Uniapp

Comment implémenter la fonction de mot de passe gestuel dans uniapp

Le mot de passe gestuel est un moyen courant de déverrouiller les téléphones mobiles et peut également être utilisé dans les applications mobiles développées par uniapp. Dans uniapp, nous pouvons utiliser Canvas pour tracer des chemins gestuels et implémenter la fonction de mot de passe gestuel en surveillant les opérations gestuelles de l'utilisateur. Cet article expliquera comment implémenter la fonction de mot de passe gestuel dans uniapp et fournira des exemples de code pertinents.

1. Créer la structure de la page

Tout d'abord, nous devons créer une structure de page qui contient l'élément canevas. Créez un nouveau dossier GestureLock dans le répertoire des pages et créez le fichier GestureLock.vue dans ce dossier. Dans le fichier GestureLock.vue, ajoutez le code suivant :

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

Dans le code ci-dessus, nous avons ajouté un élément canvas à la page et spécifié le nom de référence de l'élément comme gesteCanvas via l'attribut ref. Et l'identifiant de l'élément canvas est spécifié sous la forme gesteCanvas via l'attribut canvas-id. Dans la méthode onLoad du composant, nous utilisons uni.createSelectorQuery().in(this) pour obtenir la largeur et la hauteur de l'élément canevas et les stocker dans les données du composant. Dans les méthodes du composant, nous définissons une méthode de dessin d'arrière-plan drawBackground(), qui est utilisée pour dessiner un arrière-plan gris sur le canevas.

2. Surveillance des opérations gestuelles

Ensuite, nous devons surveiller les opérations gestuelles de l'utilisateur, y compris la pression, le mouvement et le relâchement des doigts. Nous pouvons réaliser cette fonction grâce aux événements gestuels d'uniapp. Dans les méthodes du fichier GestureLock.vue, ajoutez le code suivant :

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() {
    // ...
  },
},

Dans le code ci-dessus, trois méthodes sont ajoutées aux méthodes, correspondant à l'événement de pression du doigt, à l'événement de déplacement du doigt et à l'événement de relâchement du doigt. Dans l'événement de pression du doigt, nous obtenons la position actuelle du doigt via event.touches[0] et la stockons dans les variables startX et startY pour une utilisation ultérieure. Dans l'événement de mouvement du doigt, nous obtenons la position actuelle du doigt via event.touches[0] et la stockons dans les variables moveX et moveY pour une utilisation ultérieure. Lors de l'événement de libération du doigt, nous pouvons vérifier le mot de passe du geste.

3. Dessinez le chemin du geste

Ensuite, nous devons dessiner le chemin du geste sur la toile. Dans les méthodes du fichier GestureLock.vue, ajoutez le code suivant :

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);
  },
},

Dans le code ci-dessus, dans la méthode drawGesturePath, on utilise d'abord la méthode this.ctx.clearRect() pour effacer le contenu sur le canevas, puis appelez la méthode drawBackground pour dessiner un arrière-plan gris. Ensuite, nous utilisons la méthode this.ctx.setStrokeStyle() pour définir la couleur de la ligne, utilisons la méthode this.ctx.setLineWidth() pour définir la largeur de la ligne, utilisons la méthode this.ctx.setLineCap() pour définissez le style de point de terminaison de la ligne et utilisez-le. La méthode ctx.setLineJoin() définit le style de connexion de la ligne. Ensuite, en parcourant le tableau gestePath, chaque segment de ligne du chemin gestuel est dessiné en séquence. Enfin, utilisez la méthode this.ctx.draw(true) pour afficher le contenu dessiné sur le canevas en temps réel.

4. Mise en œuvre complète de la fonction de mot de passe gestuel

Enfin, nous intégrons les codes précédents pour réaliser la fonction complète de mot de passe gestuel. Dans le fichier GestureLock.vue, ajoutez le code suivant :

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

Dans le code ci-dessus, nous avons ajouté trois écouteurs d'événements gestuels sur l'élément canvas : @touchstart, @touchmove et @touchend. Dans la méthode de traitement d'événements correspondante, nous avons effectué des opérations associées, notamment l'obtention et la sauvegarde des positions des doigts, le dessin et la mise à jour en temps réel des trajectoires gestuelles, etc. Lors de l'événement de relâchement du doigt, nous pouvons vérifier le mot de passe du geste, par exemple en déterminant si le chemin du geste tracé par l'utilisateur répond aux exigences ou est cohérent avec le mot de passe du geste prédéfini.

Grâce aux étapes ci-dessus, nous pouvons implémenter la fonction de mot de passe gestuel dans uniapp. Lorsque l'utilisateur appuie sur son doigt et le déplace, le chemin gestuel sera affiché sur la toile en temps réel ; lorsque l'utilisateur relâche son doigt, nous pouvons effectuer les opérations de vérification correspondantes basées sur le chemin gestuel. J'espère que cet article vous aidera à implémenter la fonction de mot de passe gestuel dans uniapp. Si vous avez des questions, veuillez laisser un message pour discussion.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!