手機螢幕解鎖

標籤：螢幕解鎖   store   tle   邏輯   scope   return   length   title   利用   

 

 

實現原理
　　利用HTML5的canvas，將解鎖的圈圈划出，利用touch事件解鎖這些圈圈，直接看代碼。

1. function createCircle(){// 建立解鎖點的座標，根據canvas的大小來平均分配半徑
2.  
3.        var n = chooseType;// 畫出n*n的矩陣 
4.        lastPoint = [];
5.        arr = [];
6.        restPoint = [];
7.        r = ctx.canvas.width / (2 + 4 * n);// 公式計算 半徑和canvas的大小有關
8.        for (var i = 0 ; i < n ; i++) {
9.            for (var j = 0 ; j < n ; j++) {
10.                arr.push({
11.                    x: j * 4* r + 3 * r,
12.                    y: i * 4* r + 3 * r
13.                });
14.                restPoint.push({
15.                    x: j * 4* r + 3 * r,
16.                    y: i * 4* r + 3 * r
17.                });
18.            }
19.        }
20.        //return arr;
21.     }

複製代碼

　　canvas裡的圓圈畫好之後可以進行事件綁定

1. function bindEvent() {
2.        can.addEventListener("touchstart", function (e) {
3.             var po = getPosition(e);
4.             console.log(po);
5.             for (var i = 0 ; i < arr.length ; i++) {
6.                if (Math.abs(po.x - arr[i].x)< r && Math.abs(po.y - arr[i].y) < r) { // 用來判斷起始點是否在圈圈內部
7.  
8.                    touchFlag= true;
9.                   drawPoint(arr[i].x,arr[i].y);
10.                   lastPoint.push(arr[i]);
11.                   restPoint.splice(i,1);
12.                    break;
13.                }
14.             }
15.         }, false);
16.         can.addEventListener("touchmove", function (e) {
17.            if (touchFlag) {
18.                update(getPosition(e));
19.            }
20.         }, false);
21.         can.addEventListener("touchend", function (e) {
22.             if (touchFlag) {
23.                 touchFlag = false;
24.                 storePass(lastPoint);
25.                 setTimeout(function(){
26.  
27.                    init();
28.                }, 300);
29.             }
30.  
31.  
32.         }, false);
33.     }

複製代碼

　　接著到了最關鍵的步驟繪製解鎖路徑邏輯，通過touchmove事件的不斷觸發，調用canvas的moveTo方法和lineTo方法來畫出折現，同時判斷是否達到我們所畫的圈圈裡面，其中lastPoint儲存正確的圈圈路徑，restPoint儲存全部圈圈去除正確路徑之後剩餘的。 Update方法：

1. function update(po) {// 核心變換方法在touchmove時候調用
2.        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
3.  
4.        for (var i = 0 ; i < arr.length ; i++) { // 每幀先把面板畫出來
5.            drawCle(arr[i].x, arr[i].y);
6.        }
7.  
8.        drawPoint(lastPoint);// 每幀花軌跡
9.        drawLine(po , lastPoint);// 每幀畫圓心
10.  
11.        for (var i = 0 ; i < restPoint.length ; i++) {
12.            if (Math.abs(po.x - restPoint[i].x) < r&& Math.abs(po.y - restPoint[i].y) < r) {
13.                drawPoint(restPoint[i].x,restPoint[i].y);
14.                lastPoint.push(restPoint[i]);
15.                restPoint.splice(i, 1);
16.                break;
17.            }
18.        }
19.  
20.     }

複製代碼

　　最後就是收尾工作，把路徑裡面的lastPoint儲存的數組變成密碼存在localstorage裡面，之後就用來處理解鎖驗證邏輯了。

1. function storePass(psw){// touchend結束之後對密碼和狀態的處理
2.        if (pswObj.step == 1) {
3.            if (checkPass(pswObj.fpassword, psw)) {
4.                pswObj.step = 2;
5.                pswObj.spassword = psw;
6.               document.getElementById(‘title‘).innerHTML = ‘密碼儲存成功‘;
7.                drawStatusPoint(‘#2CFF26‘);
8.               window.localStorage.setItem(‘passwordx‘, JSON.stringify(pswObj.spassword));
9.               window.localStorage.setItem(‘chooseType‘, chooseType);
10.            } else {
11.               document.getElementById(‘title‘).innerHTML = ‘兩次不一致，重新輸入‘;
12.                drawStatusPoint(‘red‘);
13.                delete pswObj.step;
14.            }
15.        } else if (pswObj.step == 2) {
16.            if (checkPass(pswObj.spassword, psw)) {
17.               document.getElementById(‘title‘).innerHTML = ‘解鎖成功‘;
18.                drawStatusPoint(‘#2CFF26‘);
19.            } else {
20.                drawStatusPoint(‘red‘);
21.               document.getElementById(‘title‘).innerHTML = ‘解鎖失敗‘;
22.            }
23.        } else {
24.            pswObj.step = 1;
25.            pswObj.fpassword = psw;
26.            document.getElementById(‘title‘).innerHTML = ‘再次輸入‘;
27.        }
28.  
29.     }

手機螢幕解鎖