Un projet d'application sur lequel j'ai récemment travaillé a utilisé apicloud pour réaliser un développement multiplateforme. Maintenant, je dois ajouter une fonction de déverrouillage gestuelle (grille de neuf carrés) à cette application. apicloud a déjà des plug-ins de déverrouillage gestuel tiers implémentés de manière native. car il est natif et a de meilleures performances. Eh bien, il est plus pratique de les appeler, mais leurs styles ne peuvent pas être modifiés, je prévois donc d'implémenter cette fonction moi-même. Cet article organisera et partagera le processus de mise en œuvre. J'espère que ceux qui en ont besoin pourront le comprendre. Le code partagé n'implémente que les 设置密码功能les plus élémentaires, 解锁功能, les fonctions 比较密码, etc. Certaines fonctions avancées telles que : ne peuvent pas limiter le nombre maximum de fois qu'un point peut être passé et limitent la longueur du mot de passe défini par le utilisateur.
Implémentation native ou autres méthodes ?
1. Utilisez les plates-formes correspondantes d'Android et iOS pour écrire le plug-in de déverrouillage gestuel via le code natif. L'expérience est bonne, mais le cycle de développement est long, les problèmes de compatibilité de chaque plateforme doivent être résolus et la méthode d'écriture du plug-in de la plateforme APICloud doit être apprise. (abandonner)
2. Utilisez le canevas HTML5 pour implémenter. Le cycle de développement est court, il n’est pas nécessaire de trop s’occuper des problèmes de compatibilité et l’expérience est bonne. (choisir)
Analyse de principe Déverrouillage gestuelUtilisez vos doigts pour connecter successivement neuf points sur l'écran afin de former un motif, c'est ce qu'on appelle le déverrouillage de motif. Comme le montre l'image ci-dessus, chaque cercle de déverrouillage est en fait suivi d'un numéro. Ce qui est comparé à chaque fois n'est pas le motif dessiné par l'utilisateur, mais la chaîne de mot de passe composée des chiffres sous les cercles qui sont connectés en série à chaque fois. Le doigt traverse le motif. Essentiellement, nous La comparaison est toujours la chaîne du mot de passe, mais du point de vue de l'utilisateur, c'est un motif dessiné. La mémoire des modèles est bien plus forte que celle des chaînes de chiffres.
Étapes de mise en œuvre dessiner un disque de chiffrementLe dessin du disque de mot de passe est relativement simple. La seule chose à laquelle vous devez faire attention est que vous devez utiliser le calcul dynamique pour que le motif positif entouré de neuf points soit toujours au milieu de l'écran. besoin de soustraire la hauteur de la barre d’état.
var width = $(document).width();var height = $(document).height() - 40 //Soustraire la hauteur de la barre d'état du téléphone portable//La grille de neuf carrés est en fait de neuf points, a objet de coordonnées de 9 points var lockCicle = { x : 0, //coordonnée x y : 0, //couleur de la coordonnée y : #999999, état : 1 //état si le point actuel a été lié}; - hauteur) / 2; //Calculer le décalage var arr = []; //Tableau de coordonnées de neuf points //Méthode pour calculer les coordonnées de neuf points pour (var i = 1; i <= 3; i++) { //Chaque ligne pour (var j = 1; j <= 3; j++) { //Chaque variable dans chaque ligne lockCicle = {}; //Écran horizontal if (offset > 0) { lockCicle.x = (hauteur / 4) * j + Math.abs(offset); lockCicle.y = (hauteur / 4) * i; lockCicle.state = 0; //Écran vertical} else { lockCicle.x = (largeur / 4) * j; / 4) * i + Math.abs(offset); lockCicle.state = 0; } arr.push(lockCicle }}//Fonction méthode pour initialiser l'interface); init() { ctx.clearRect(0, 0, width, height); //Effacer le pointeur du canevasArr = []; //Effacer le chemin de dessin pour (var i = 0; i < arr.length; i++) { arr [i ].state = 0; //Effacer l'état de dessin drawPointer(i); }}//Dessiner la fonction d'interface de déverrouillage à neuf carrés drawPointer(i) { ctx.save(); (hastouch) { radius = width / 12; else { radius = 24; } var _fillStyle = #dd514c; var _strokeStyle = #dd514c; //Différents états affichent des couleurs différentes if (arr[i].state == 1) { _StrokeStyle = #1bd6c5; } //Dessine l'origine ctx.beginPath(); _fillStyle; ctx.arc(arr[i].x, arr[i].y, 6, 0, Math.PI * 2, false ctx.fill(); .beginPath(); ctx.StrokeStyle = _StrokeStyle; ctx.lineWidth = 0,3 ; ctx.lineJoin = round; ctx.arc(arr[i].x, arr[i].y, rayon, 0, Math.PI * 2, false ctx.closePath(); .restore();}//Interface d'initialisation init(); Tracer une connexion Comment établir une connexion var pointerArr = []; //Tableau de coordonnées des points de la ligne de connexion var startX, startY; //Point de départ de la ligne var puts = []; //Tableau de neuf points passés var currentPointer; connecté var pwd = []; //Mot de passe var confirmPwd = []; //Confirmer le mot de passe var unlockFlag = false; //Indique s'il faut déverrouiller/** ** Méthode pour tracer des lignes de lien, dessiner des points dans le tableau de coordonnées sur le canevas dans**/fonction drawLinePointer(x, y, flag) { ctx.clearRect(0, 0, width, height); ctx.beginPath(); = rond; ctx.lineJoin = rond; pour (var i = 0; i < pointerArr.length; i++) { if (i == 0) { ctx.moveTo(pointerArr[i].x, pointerArr[i].y); } else { ctx.lineTo(pointerArr[i].x, pointerArr[i].y); ); } } ctx.AVC(); ctx.closePath(); ctx.restore(); arr.length; i++) { drawPointer(i); //Dessine le cercle et l'origine if (ctx.isPointInPath(x, y) && currentPointer != i) { //Détermine si le clic de la souris est dans le cercle pointerArr.push ({ x : arr[i].x, y : arr[i].y }); currentPointer = i; puts.push(i + 1); startY = arr[i].y; arr[i].state = 1; } } if (flag) { ctx.beginPath(); ctx.globalCompositeOperation = destination-over; e2e0e0; ctx.lineWidth = 5; ctx.lineCap = rond; ctx.moveTo(startX, startY); ctx.lineTo(x, y); ctx.beginPath(); Événement contraignantLe processus de connexion consiste à combiner trois événements tactiles (terminal mobile) pour obtenir les coordonnées de la position actuelle et à les placer dans un tableau, puis à restituer ces coordonnées à l'interface.
// Écriture d'événements compatible avec mobile touch var hastouch = ontouchstart dans la fenêtre ? true : false, tapstart = hastouch ? touchstart : mousedown, tapmove = hastouch touchmove : mousemove, tapend = hastouch touchend : mouseup ; addEventListener(tapstart, function(e) { isMouseDown = true; var x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft; var y1 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop; drawLinePointer(x1, y1, true);}) ;//Lors du déplacement, enregistrez tous les points de coordonnées passés par lockCnavs.addEventListener(tapmove, function(e) { if (isMouseDown) { var x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft; var y1 = hastouch e.targetTouches[0].pageY : e.clientY - canvas.offsetTop; x1, y1, true }});//Annuler lockCnavs.addEventListener(tapend, function(e) { drawLinePointer(0, 0, false); isMouseDown = false; pointerArr = []; if (puts.length >= 6) { alert (Votre mot de passe de modèle est : [ + puts.join( > ) + ] ); if (unlockFlag) { //Déverrouiller déverrouiller(); } else { //Définir le paramètre de mot de passe de déverrouillageUnlockPwd(); } else { if (puts.length >= 1) { alert(Votre modèle de mot de passe est trop simple~~~); init(); } } puts = [];}); Implémenter une logique de déverrouillageGrâce aux étapes ci-dessus, les données et les effets d'affichage après chaque dessin de Jiugongge sont déverrouillés. Il vous suffit désormais d'ajouter le code logique correspondant aux endroits clés. Ici, nous introduisons principalement sa logique de mise en œuvre sans encapsuler le code.
Code associé
//Définissez le mot de passe de déverrouillage et la fonction de test de déverrouillageUnlockPwd() { if (pwd.length <= 0) { pwd = puts; init(); $(header).text(dessinez à nouveau le modèle de déverrouillage } else if (); confirmPwd. length <= 0) { confirmPwd = puts; console.log(pwd + + confirmPwd); // Notez si le mot de passe deux fois est correct si (pwd.length > 0 && confirmPwd.length > 0) { if (compareArr(pwd, confirmPwd)) { $(header).text(Motif de déverrouillage dessiné avec succès init(); else { $(header).text(Motif de déverrouillage dessiné deux fois) incohérent); ); init(); confirmPwd = []; } }}//Déverrouiller la fonction unlock() { console.log (Déverrouiller le mot de passe : + puts + + confirmPwd); (compareArr(puts, confirmPwd)) { $(header).text(Déverrouillage réussi ! Saut de page... } else { $(header).text(Le modèle de déverrouillage est incorrect !!! ); }$(footer).click(function() { if ($(this).text() === unlock) { unlockFlag = true; init(); $(header).text(dessiner un motif de déverrouillage); }});//Comparez deux tableaux (Nombre) pour la fonction d'égalité compareArr(arr1, arr2) { return arr1.toString() === arr2.toString();}post-scriptum
L'adresse complète de la démonstration en ligne de cet article
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.