h5 verwendet Canvas, um das Entsperren durch Gesten zu erreichen

Ein App-Projekt, an dem ich kürzlich gearbeitet habe, verwendete Apicloud, um eine plattformübergreifende Entwicklung zu erreichen. Jetzt muss ich dieser App eine Gesten-Entsperrungsfunktion hinzufügen, die bereits über einige nativ implementierte Gesten-Entsperrungs-Plug-Ins verfügt. Weil es nativ ist und eine bessere Leistung bietet. Nun, es ist bequemer, sie aufzurufen, aber ihre Stile können nicht geändert werden, daher habe ich vor, diese Funktion selbst zu implementieren. In diesem Artikel wird der Implementierungsprozess organisiert und geteilt. Ich hoffe, dass diejenigen, die ihn benötigen, ihn verstehen können. Der gemeinsam genutzte Code implementiert nur die grundlegendsten 设置密码功能, 解锁功能, Funktionen 比较密码usw. Einige erweiterte Funktionen wie: können die maximale Anzahl, mit der ein Punkt übergeben werden kann, und die Länge des von der Passwörter festgelegten Passworts nicht begrenzen Benutzer.

Native Implementierung oder andere Methoden?

1. Verwenden Sie die entsprechenden Plattformen von Android und iOS, um das Plug-In zum Entsperren von Gesten über nativen Code zu schreiben. Die Erfahrung ist gut, aber der Entwicklungszyklus ist lang, die Kompatibilitätsprobleme jeder Plattform müssen gelöst werden und die Methode zum Schreiben von APICloud-Plattform-Plug-Ins muss erlernt werden. (aufgeben)

2. Verwenden Sie zur Implementierung HTML5-Canvas. Der Entwicklungszyklus ist kurz, man muss sich nicht zu sehr mit Kompatibilitätsproblemen befassen und die Erfahrung ist gut. (wählen)

Verbinden Sie mit Ihren Fingern nacheinander neun Punkte auf dem Bildschirm, um ein Muster zu bilden. Dies wird als Musterentsperrung bezeichnet. Wie im Bild oben gezeigt, folgt auf jeden Entsperrkreis tatsächlich eine Zahl. Was jedes Mal verglichen wird, ist nicht das vom Benutzer gezeichnete Muster, sondern die Passwortzeichenfolge, die aus den Zahlen unter den Kreisen besteht, die jedes Mal in Reihe geschaltet werden Der Finger durchläuft das Muster im Wesentlichen. Der Vergleich ist immer noch die Zeichenfolge, aber aus Sicht des Benutzers handelt es sich um ein gezeichnetes Muster. Das Gedächtnis von Mustern ist viel stärker als das von Zahlenfolgen.

Das Zeichnen der Passwortscheibe ist relativ einfach. Das Einzige, worauf Sie achten müssen, ist, dass Sie die dynamische Berechnung verwenden müssen, um das von neun Punkten umgebene positive Muster immer in der Mitte des Bildschirms zu platzieren Subtrahieren Sie die Höhe der Statusleiste.

 var width = $(document).width();var height = $(document).height() - 40; //Subtrahieren Sie die Höhe der Statusleiste des Mobiltelefons//Das Neun-Quadrat-Raster beträgt tatsächlich neun Punkte Koordinatenobjekt der neun Punkte var lockCicle = { x: 0, //x-Koordinate y: 0, //y-Koordinatenfarbe: #999999, Status: 1 //Status, ob der aktuelle Punkt verknüpft wurde}; Breite - Höhe) / 2; //Offset berechnen var arr = []; //Koordinatenarray von neun Punkten //Methode zum Berechnen der Koordinaten von neun Punkten für (var i = 1; i <= 3; i++) { //Jede Zeile für (var j = 1; j <= 3; j++) { //Jede Variable in jeder Zeile lockCicle = {}; //Horizontaler Bildschirm if (offset > 0) { lockCicle.x = (height / 4) * j + Math.abs(offset); lockCicle.y = (height / 4) * i; lockCicle.state = 0; //Vertical screen} else { lockCicle.x = (width / 4) * j; / 4) * i + Math.abs(offset); lockCicle.state = 0; } arr.push(lockCicle); init() { ctx.clearRect(0, 0, width, height); //Den Zeichenpfad löschen für (var i = 0; i < arr.length; i++) { arr [i ].state = 0; //Zeichne den Zeichenstatus drawPointer(i); }/Zeichne die Neun-Quadrat-Raster-Schnittstellenfunktion drawPointer(i) { var radius(); (hastouch) { radius = width / 12; } else { radius = 24; var _fillStyle = #dd514c; // Verschiedene Zustände zeigen unterschiedliche Farben an if (arr[i].state == 1) _strokeStyle = #1bd6c5; } //Zeichne den Ursprung ctx.beginPath(); _fillStyle; ctx.arc(arr[i].x, arr[i].y, 6, 0, Math.PI * 2, false); .beginPath(); ctx.StrokeStyle = _StrokeStyle; ctx.lineWidth = 0,3; ctx.lineJoin = Round; ctx.arc(arr[i].x, arr[i].y, radius, 0, Math.PI * 2, false); .restore();}//Initialisierungsschnittstelle init();

 var pointerArr = []; //Koordinatenarray der Verbindungspunkte var startX, startY; //Anfangspunkt der Linie var puts = []; //Ob der aktuelle Punkt verbunden wurde var pwd = []; //Passwort var securePwd = []; //Kennwort bestätigen var unlockFlag = false; //Flag, ob entsperrt werden soll/** Methode zum Zeichnen von Verbindungslinien, Zeichnen von Punkten im Koordinatenarray auf der Leinwand in**/Funktion drawLinePointer(x, y, flag) { ctx.clearRect(0, 0, width, height); ctx.beginPath(); = rund; ctx.lineJoin = rund für (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.close(); ctx.restore(); for (var i = 0; i < arr.length; i++) { drawPointer(i); //Kreis und Ursprung zeichnen if (ctx.isPointInPath(x, y) && currentPointer != i) { //Bestimmen Sie, ob sich der Mausklick im Kreis befindet pointerArr.push ({ x : arr[i].x, y: arr[i].y }); currentPointer = i; startX = arr[i].x; startY = arr[i].y; arr[i].state = 1; } } if (flag) { ctx.beginPath(); e2e0e0; ctx.lineWidth = 5; ctx.lineCap = rund; ctx.moveTo(startX, startY); ctx.lineTo(x, y); ctx.beginPath();

Der Verbindungsprozess besteht darin, drei Berührungsereignisse (mobiles Terminal) zu kombinieren, um die Koordinaten der aktuellen Position zu erhalten, sie in ein Array einzufügen und diese Koordinaten dann an die Schnittstelle zu rendern.

• touchstart (mousedown) Setzen Sie isMouseDown=true, wenn der Finger (die Maus) gedrückt wird, speichern Sie die Koordinaten des Punkts im Linienarray und zeichnen Sie die Punkte im Array.
• touchmove (mousemove) Wenn isMouseDown=true, werden alle Koordinatenpunkte während der Bewegung des Fingers (der Maus) im Depressionsarray gespeichert und die Punkte im Array werden gezeichnet.
• mouseup (mouseup) Setzen Sie isMouseDown=fasle, wenn der Finger (die Maus) losgelassen wird. Zeichnen Sie alle Punkte im Array, löschen Sie das pointerArr-Array und vergleichen Sie dann die Anzahl der verbundenen Punkte, wenn sie weniger als 6 beträgt (im Allgemeinen von Ihnen selbst festgelegt). Das Passwort besteht aus mehr als 6 Ziffern.) Geben Sie eine Meldung aus, dass die Länge des Passworts nicht ausreicht, löschen Sie das Puts-Array und rufen Sie die Init-Methode erneut auf, um die Schnittstelle zu initialisieren. Wenn es größer oder gleich 6 ist, wird das Passwort festgelegt erfolgreich.

 //Ereignisschreibmethode kompatibel mit mobilem Touch var hastouch = ontouchstart in window ? true : false, tapstart = hastouch ? touchstart : mousemove, tapend = hastouch ? touchend : mouseup;//Bind press event lockCnavs .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;}) ;//Speichern Sie beim Bewegen alle von 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 - drawLinePointer; x1, y1, true); }});//Abbrechen lockCnavs.addEventListener(tapend, function(e) { drawLinePointer(0, 0, false); isMouseDown = false; pointerArr = []; if (puts.length >= 6) { warning(Ihr Musterpasswort ist: [ + puts.join( > ) + ] ); if (unlockFlag) { //Unlock Unlock(); warning(Ihr Musterpasswort ist zu einfach~~~); init(); } puts = [];});

Durch die oben genannten Schritte werden die Daten- und Anzeigeeffekte nach jeder Zeichnung von Jiugongge freigeschaltet. Jetzt müssen Sie nur noch den entsprechenden Logikcode an wichtigen Stellen hinzufügen. Hier stellen wir hauptsächlich die Implementierungslogik vor, ohne den Code zu kapseln.

Zugehöriger Code

 //Legen Sie das Entsperrkennwort und die Entsperrtestfunktion fest. SettingUnlockPwd() { if (pwd.length <= 0) { pwd = puts(); bestätigenPwd. Länge <= 0) { bestätigenPwd = puts; //Beachten Sie, ob das Passwort zweimal korrekt ist if (pwd.length > 0 &&); bestätigenPwd.length > 0) { if (compareArr(pwd, bestätigenPwd)) { $(header).text(Entsperrungsmuster erfolgreich gezeichnet init( } else { $(header).text(Entsperrungsmuster wurde zweimal inkonsistent gezeichnet) ; init(); bestätigenPwd = []; }}//Unlock function unlock() { console.log(Unlock Password: + puts + + securePwd); (compareArr(puts, bestätigenPwd)) { $(header).text(Entsperrung erfolgreich! Seitensprung...); else { $(header).text(Entsperrungsmuster ist falsch!!!); }$(footer).click(function() { if ($(this).text() === unlock) { unlockFlag = true; init(); $(header).text(draw unlock pattern); }});//Vergleiche zwei Arrays (Number) für die Gleichheitsfunktion CompareArr(arr1, arr2) { return arr1.toString() === arr2.toString();}

Nachwort

Die vollständige Demo-Online-Demonstrationsadresse dieses Artikels

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.