WeChat applet development gesture unlocking instance code

Gesture unlocking is a common way to unlock apps. it is much easier to enter passwords. This article describes how to use a gesture to unlock an instance. Gesture unlocking is a common way to unlock apps. it is much easier to enter passwords. The following shows how to unlock a mobile phone based on a applet. The final implementation result is as follows:

The entire function is implemented based on canvas. First, add the canvas component and set the style.

.gesture-lock {  margin: 100rpx auto;  width: 300px;  height: 300px;  background-color: #ffffff;}

The implementation code for gesture unlocking is in gesture_lock.js (for the complete source code address, see the end ).

Initialization

Constructor (canvasid, context, cb, opt) {this. touchPoints = []; this. checkPoints = []; this. canvasid = canvasid; this. ctx = context; this. width = opt & opt. width | 300; // canvas length this. height = opt & opt. height | 300; // canvas width this. cycleNum = opt & opt. cycleNum | 3; this. radius = 0; // The radius of the touch point. this. isParamOk = false; this. marge = this. margeCircle = 25; // The interval between the touch point and the canvas border. initColor = opt & opt. initColor | '# C5C5C3'; this. checkColor = opt & opt. checkColor | '# 5AA9EC'; this. errorColor = opt & opt. errorColor | '# e19984'; this. touchState = "unTouch"; this. checkParam (); this. lastCheckPoint = null; if (this. isParamOk) {// calculate the length of the radius of the touch point this. radius = (this. width-this. marge * 2-(this. margeCircle * (this. cycleNum-1)/(this. cycleNum * 2) this. radius = Math. floor (this. radius); // calculates the center position of each touch point. this. calCircleParams ();} this. onEnd = cb; // callback function at the end of the sliding gesture}

Mainly set some parameters, such as the canvas length and width, the canvas context, the number of gesture locks (3 multiplied by 3, 4 multiplied by 4), and the color of the gesture lock, the callback function at the end of the gesture slide. And calculate the radius of the shot lock.

Calculates the center position of each gesture lock.

  calCircleParams() {    let n = this.cycleNum;    let count = 0;    for (let i = 0; i < n; i++) {      for (let j = 0; j < n; j++){        count++;        let touchPoint = {          x: this.marge + i * (this.radius * 2 + this.margeCircle) + this.radius,          y: this.marge + j * (this.radius * 2 + this.margeCircle) + this.radius,          index: count,          check: "uncheck",        }        this.touchPoints.push(touchPoint)      }    }  }

Draw a gesture lock

   for (let i = 0; i < this.touchPoints.length; i++){      this.drawCircle(this.touchPoints[i].x, this.touchPoints[i].y, this.radius, this.initColor)   }   this.ctx.draw(true);

The next step is to identify the user's sliding behavior, determine which circles the user has crossed, and then identify the user's gestures.

Detect trigger and update canvas in touchstart and touchmove events

OnTouchStart (e) {// do not recognize multi-touch if (e. touches. length> 1) {this. touchState = "unTouch"; return;} this. touchState = "startTouch"; this. checkTouch (e); let point = {x: e. touches [0]. x, y: e. touches [0]. y}; this. drawCanvas (this. checkColor, point);} onTouchMove (e) {if (e. touchState = "unTouch") {return;} if (e. touches. length> 1) {this. touchState = "unTouch"; return;} this. checkTouch (e); let point = {x: e. touches [0]. x, y: e. touches [0]. y}; this. drawCanvas (this. checkColor, point );}

Checks whether a user has crossed a circle.

  checkTouch(e) {    for (let i = 0; i < this.touchPoints.length; i++){      let point = this.touchPoints[i];      if (isPointInCycle(e.touches[0].x, e.touches[0].y, point.x, point.y, this.radius)) {        if (point.check === 'uncheck') {          this.checkPoints.push(point);          this.lastCheckPoint = point;        }        point.check = "check"        return;      }    }  }

Update canvas

DrawCanvas (color, point) {// clear the canvas before each update this. ctx. clearRect (0, 0, this. width, this. height); // draw the triggered and untriggered locks in different colors and forms for (let I = 0; I <this. touchPoints. length; I ++) {let point = this. touchPoints [I]; if (point. check = "check") {this. drawCircle (point. x, point. y, this. radius, color); this. drawCircleCentre (point. x, point. y, color);} else {this. drawCircle (this. touchPoints [I]. x, this. touchPoints [I]. y, this. radius, this. initColor) }}// draw a line segment between recognized locks if (this. checkPoints. length> 1) {let lastPoint = this. checkPoints [0]; for (let I = 1; I <this. checkPoints. length; I ++) {this. drawLine (lastPoint, this. checkPoints [I], color); lastPoint = this. checkPoints [I] ;}}// draw the line segment between the last recognize lock and the current touch point if (this. lastCheckPoint & point) {this. drawLine (this. lastCheckPoint, point, color);} this. ctx. draw (true );}

Call the callback function at the end of the slide and pass the recognized gesture.

  onTouchEnd(e) {    typeof this.onEnd === 'function' && this.onEnd(this.checkPoints, false);  }  onTouchCancel(e) {    typeof this.onEnd === 'function' && this.onEnd(this.checkPoints, true);  }

Incorrect reset and display gesture

  gestureError() {    this.drawCanvas(this.errorColor)  }  reset() {    for (let i = 0; i < this.touchPoints.length; i++) {      this.touchPoints[i].check = 'uncheck';    }    this.checkPoints = [];    this.lastCheckPoint = null;    this.drawCanvas(this.initColor);  }

How to Call

Create a lock object in the onload method and call the corresponding method in the user touch event

OnLoad: function () {var s = this; this. lock = new Lock ("id-gesture-lock", wx. createCanvasContext ("id-gesture-lock"), function (checkPoints, isCancel) {console. log ('over'); s. lock. gestureError (); setTimeout (function () {s. lock. reset () ;}, 1000) ;}, {width: 300, height: 300}) this. lock. drawGestureLock (); console. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo}) that. update ()}, onTouchStart: function (e) {this. lock. onTouchStart (e) ;}, onTouchMove: function (e) {this. lock. onTouchMove (e) ;}, onTouchEnd: function (e) {this. lock. onTouchEnd (e );}

The above is the details of the code used to unlock an instance by using a gesture developed by the applet. For more information, see other related articles in the first PHP community!