Le déverrouillage
gestuel est une méthode de déverrouillage courante sur l'application, qui est beaucoup plus pratique que la saisie d'un mot de passe. Ce qui suit montre comment déverrouiller le téléphone en fonction de l'applet WeChat. L'effet final est le suivant :

La fonction entière est implémentée sur la base de canvas. Ajoutez d'abord le composant canevas et définissez le style <.>
1 2 3 4 5 | <!--index.wxml-->
<view class = "container" >
<canvas canvas-id= "id-gesture-lock" class = "gesture-lock" bindtouchstart= "onTouchStart"
bindtouchmove= "onTouchMove" bindtouchend= "onTouchEnd" ></canvas>
</view>
|
Copier après la connexion
1 2 3 4 5 6 | .gesture-lock {
margin: 100rpx auto;
width: 300px;
height: 300px;
background-color: #ffffff;
}
|
Copier après la connexion
Le code d'implémentation du déverrouillage par gestes est dans geste_lock.
js (adresse complète du code source Voir fin).
Initialisation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | constructor(canvasid, context, cb, opt){
this.touchPoints = [];
this.checkPoints = [];
this.canvasid = canvasid;
this.ctx = context;
this.width = opt && opt.width || 300;
this.height = opt && opt.height || 300;
this.cycleNum = opt && opt.cycleNum || 3;
this.radius = 0;
this.isParamOk = false;
this.marge = this.margeCircle = 25;
this.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) {
this.radius = (this.width - this.marge * 2 - (this.margeCircle * (this.cycleNum - 1))) / (this.cycleNum * 2)
this.radius = Math. floor (this.radius);
this.calCircleParams();
}
this.onEnd = cb;
}
|
Copier après la connexion
Définissez principalement certains paramètres, tels que la longueur et la largeur de la toile, le contexte du canevas, et gestes Le nombre de verrous (3 fois 3, 4 fois 4), la couleur du verrou gestuel, la fonction de rappel à la fin du glissement gestuel, etc. Et calculez le rayon du verrouillage gestuel.
Calculez la position centrale de chaque verrouillage gestuel
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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)
}
}
}
|
Copier après la connexion
Dessinez le verrouillage gestuel
1 2 3 4 | 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);
|
Copier après la connexion
L'étape suivante consiste à identifier le
comportement de glisse de l'utilisateur, à déterminer les cercles que l'utilisateur a traversés, puis à identifier les gestes de l'utilisateur.
Détecter les déclencheurs dans les événements touchstart et touchmove et mettre à jourcanvas
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | onTouchStart(e) {
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);
}
|
Copier après la connexion
Détecter si l'utilisateur a traversé un cercle
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 ;
}
}
}
|
Copier après la connexion
Mettre à jour le canevas
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | drawCanvas(color, point) {
this.ctx.clearRect(0, 0, this.width, this.height);
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)
}
}
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];
}
}
if (this.lastCheckPoint && point) {
this.drawLine(this.lastCheckPoint, point, color);
}
this.ctx.draw(true);
}
|
Copier après la connexion
Appeler la fonction de rappel lorsque le balayage de l'utilisateur se termine et transmettre le geste reconnu
1 2 3 4 5 6 7 | onTouchEnd(e) {
typeof this.onEnd === ' function ' && this.onEnd(this.checkPoints, false);
}
onTouchCancel(e) {
typeof this.onEnd === ' function ' && this.onEnd(this.checkPoints, true);
}
|
Copier après la connexion
Réinitialiser et afficher les erreurs de gestes
1 2 3 4 5 6 7 8 9 10 11 12 | 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);
}
|
Copier après la connexion
Comment appeler
pour créer un verrou
objet
dans la méthode onload et appeler la méthode correspondante <🎜 dans l'utilisateur événement tactile >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 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
app.getUserInfo( function (userInfo){
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);
}
|
Copier après la connexion
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!