How to implement gesture password function in uniapp

How to implement the gesture password function in uniapp

Gesture password is a common way to unlock mobile phones and can also be used in mobile applications developed by uniapp. In uniapp, we can use canvas to draw gesture paths and implement the gesture password function by monitoring the user's gesture operations. This article will introduce how to implement the gesture password function in uniapp and provide relevant code examples.

1. Create the page structure

First, we need to create a page structure that contains the canvas element. Create a new GestureLock folder in the pages directory and create the GestureLock.vue file in this folder. In the GestureLock.vue file, add the following code:

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

In the above code, we added a canvas element to the page and specified the reference name of the element as gestureCanvas through the ref attribute. And the id of the canvas element is specified as gestureCanvas through the canvas-id attribute. In the component's onLoad method, we use uni.createSelectorQuery().in(this) to obtain the width and height of the canvas element and store it in the component's data. In the component's methods, we define a background drawing method drawBackground(), which is used to draw a gray background on the canvas.

2. Listen to gesture operations

Next, we need to monitor the user's gesture operations, including finger press, movement and release. We can achieve this function through uniapp's gesture events. In the methods of the GestureLock.vue file, add the following code:

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

In the above code, three methods are added to the methods, corresponding to the finger press event, finger move event and finger release event. In the finger press event, we obtain the current finger position through event.touches[0] and store it in the startX and startY variables for subsequent use. In the finger movement event, we obtain the current finger position through event.touches[0] and store it in the moveX and moveY variables for subsequent use. In the finger release event, we can verify the gesture password.

3. Draw gesture path

Next step, we need to draw the gesture path on the canvas. In the methods of the GestureLock.vue file, add the following code:

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

In the above code, in the drawGesturePath method, we first use the this.ctx.clearRect() method to clear the content on the canvas, and then call drawBackground method to draw gray background. Next, we use the this.ctx.setStrokeStyle() method to set the color of the line, use the this.ctx.setLineWidth() method to set the width of the line, use the this.ctx.setLineCap() method to set the endpoint style of the line, and use this. The ctx.setLineJoin() method sets the connection style of the line. Then, by traversing the gesturePath array, each line segment of the gesture path is drawn in sequence. Finally, use the this.ctx.draw(true) method to display the drawn content on the canvas in real time.

4. Complete gesture password function implementation

Finally, we integrate the previous codes to realize the complete gesture password function. In the GestureLock.vue file, add the following code:

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

In the above code, we added three gesture event listeners on the canvas element: @touchstart, @touchmove and @touchend. In the corresponding event processing method, we performed related operations, including obtaining and saving finger positions, drawing and real-time updating of gesture paths, etc. In the finger release event, we can verify the gesture password, such as determining whether the gesture path drawn by the user meets the requirements or is consistent with the preset gesture password.

Through the above steps, we can implement the gesture password function in uniapp. When the user presses his finger and moves it, the gesture path will be displayed on the canvas in real time; when the user releases his finger, we can perform corresponding verification operations based on the gesture path. I hope this article will help you implement the gesture password function in uniapp. If you have any questions, please leave a message for discussion.

The above is the detailed content of How to implement gesture password function in uniapp. For more information, please follow other related articles on the PHP Chinese website!