최근에 제가 작업한 앱 프로젝트에서는 크로스 플랫폼 개발을 위해 apicloud를 사용했습니다. 이제 이 앱에 제스처(9제곱 그리드) 잠금 해제 기능을 추가해야 합니다. 이미 타사에서 기본적으로 구현한 제스처 잠금 해제 플러그인이 있습니다. 네이티브이고 성능도 좋으니까 뭐 호출하는 게 더 편하겠지만 스타일을 수정할 수는 없으니까 이 기능을 직접 구현해 볼 생각이에요. 이번 글에서는 구현 과정을 정리하고 공유해 보도록 하겠습니다. 꼭 필요한 분들이 이해해 주셨으면 좋겠습니다. 공유된 코드는 가장 기본적인 设置密码功能, 解锁功能, 比较密码기능 등을 구현합니다. 다음과 같은 일부 고급 기능은 포인트를 통과할 수 있는 최대 횟수를 제한할 수 없으며, 비밀번호 설정 길이를 제한할 수 없습니다. 사용자.
기본 구현 또는 다른 방법?
1. Android 및 iOS의 해당 플랫폼을 사용하여 네이티브 코드를 통해 제스처 잠금 해제 플러그인을 작성합니다. 경험은 좋지만 개발주기가 길고 각 플랫폼의 호환성 문제를 처리해야 하며 APICloud 플랫폼 플러그인 작성 방법을 배워야 합니다. (포기하다)
2. html5 캔버스를 사용하여 구현하세요. 개발 주기가 짧고 호환성 문제를 너무 많이 처리할 필요가 없으며 경험도 좋습니다. (선택하다)
원리분석 제스처 잠금 해제손가락을 이용해 화면 위의 9개 점을 순차적으로 연결해 패턴을 형성하는 것을 패턴 잠금해제라고 합니다. 위 그림과 같이 각각의 잠금해제 원 뒤에는 실제로 숫자가 따르는데, 매번 비교되는 것은 사용자가 그린 패턴이 아니라 매번 연속으로 연결된 원 아래의 숫자들로 구성된 비밀번호 문자열입니다. 손가락은 패턴을 통과합니다. 본질적으로 비교는 여전히 문자열 비밀번호이지만 사용자의 관점에서는 그려진 패턴입니다. 패턴에 대한 기억은 일련의 숫자보다 훨씬 강력합니다.
구현 단계 암호 디스크 그리기비밀번호 디스크를 그리는 것은 상대적으로 간단합니다. 주의해야 할 유일한 점은 동적 계산을 사용하여 항상 화면 중앙에 9개의 점으로 둘러싸인 양수 패턴을 만들어야 한다는 것입니다. 상태 표시줄의 높이를 뺍니다.
var width = $(document).width();var height = $(document).height() - 40; //휴대폰 상태 표시줄의 높이를 뺍니다.//9각형 그리드는 실제로 9포인트입니다. 9개 포인트의 좌표 객체 var lockCicle = { x: 0, //x 좌표 y: 0, //y 좌표 색상: #999999, state: 1 //현재 포인트가 연결되었는지 여부} var offset = ( 너비 - 높이) / 2; //오프셋 계산 var arr = []; //9개 점의 좌표 배열 //9개 점의 좌표를 계산하는 방법 for (var i = 1; i <= 3; i++) { //각 행 for (var j = 1; j <= 3; j++) { //각 행의 각 var lockCicle = {} //가로 화면 if (offset > 0) { lockCicle.x = (height / 4) * j + Math.abs(offset); lockCicle.y = (높이 / 4) * i; lockCicle.state = 0; //세로 화면} else { lockCicle.x = (너비 / 4) * j; / 4) * i + Math.abs(offset); lockCicle.state = 0 } arr.push(lockCicle) }}//인터페이스 초기화 방법; init() { ctx.clearRect(0, 0, width, height); //캔버스 포인터 지우기Arr = []; //그리기 경로 지우기 for (var i = 0; i < arr.length; i++) { arr [i ].state = 0; //그리기 상태 지우기 drawPointer(i); }}//9각형 그리드 잠금 해제 인터페이스 그리기 function drawPointer(i) { ctx.save() if (hastouch) { radius = width / 12; } else { radius = 24; } var _fillStyle = #dd514c; //다른 상태는 다른 색상을 표시합니다. if (arr[i].state == 1) _StrokeStyle = #1bd6c5; } //원점 그리기 ctx.beginPath(); _fillStyle; arr[i].x, arr[i].y, 6, 0, Math.PI * 2, false) ctx.closePath(); .beginPath(); ctx.StrokeStyle = ctx.lineWidth = ctx.lineCap = 라운드; ctx.lineJoin = round; ctx.arc(arr[i].x, arr[i].y, radius, 0, Math.PI * 2, false) ctx.closePath(); .restore();}//초기화 인터페이스 init(); 연결을 그려보세요 연결을 그리는 방법 var 포인터Arr = []; //연결선 점의 좌표 배열 var startX, startY; //선의 시작점 var puts = []; //9개의 통과점 배열 var currentPointer; var pwd = []; //비밀번호 확인 var UnlockFlag = false; //잠금 해제 여부 플래그/** ** 링크 선을 그리는 방법, 캔버스에 좌표 배열에 점을 그립니다. in**/함수 drawLinePointer(x, y, flag) { ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.lineWidth = 5; = 라운드; ctx.lineJoin = 라운드; for (var i = 0; i < 포인터Arr.length; i++) { if (i == 0) { ctx.moveTo(pointerArr[i].x,pointArr[i].y) } else { ctx.lineTo(pointerArr[i].x,pointArr[i].y ); } } ctx.closePath(); for (var i = 0; arr.length; i++) { drawPointer(i); //원과 원점 그리기 if (ctx.isPointInPath(x, y) && currentPointer != i) { //마우스 클릭이 원 포인터에 있는지 확인 Arr.push ({ x : arr[i].x, y: arr[i].y }); currentPointer = i puts.push(i + 1) startX = arr[i].x; startY = arr[i].y; arr[i].state = 1; } } if (flag) { ctx.beginPath() = Destination-over; e2e0e0; ctx.lineWidth = 5; ctx.lineCap = 라운드; ctx.moveTo(startX, startY); ctx.lineTo(x, y); ctx.beginPath(); 바인딩 이벤트연결하는 과정은 3개의 터치(휴대 단말기) 이벤트를 결합하여 현재 위치의 좌표를 얻어 배열에 넣은 후 이 좌표를 인터페이스에 렌더링하는 것입니다.
//모바일 터치와 호환되는 이벤트 작성 방법 var hastouch = ontouchstart in window ? 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);}) ;//이동시 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); }});//lockCnavs.addEventListener 취소(tapend, function(e) { drawLinePointer(0, 0, false); isMouseDown = false; 포인터Arr = []; if (puts.length >= 6) { 경고(패턴 비밀번호: [ + puts.join( > ) + ] ); if (unlockFlag) { //잠금 해제(); } else { //잠금 해제 비밀번호 설정 setupUnlockPwd() } } else { if (puts.length >= 1); 경고(패턴 비밀번호가 너무 간단합니다~~) init() } } puts = [];}); 잠금 해제 논리 구현위의 단계를 통해 Jiugongge의 각 도면 이후의 데이터 및 표시 효과가 잠금 해제되었습니다. 이제 주요 위치에 해당 논리 코드를 추가하기만 하면 됩니다. 여기서는 코드를 캡슐화하지 않고 주로 구현 논리를 소개합니다.
관련 코드
//잠금 해제 비밀번호 설정 및 잠금 해제 테스트 함수 settingsUnlockPwd() { if (pwd.length <= 0) { pwd = puts; init(); $(header).text(잠금 해제 패턴 다시 그리기); confirmPwd.length <= 0) {confirmPwd = puts; } console.log(pwd + +confirmPwd) //(pwd.length > 0 &&) verifyPwd.length > 0) { if (compareArr(pwd, verifyPwd)) { $(header).text(성공적으로 그려진 잠금 해제 패턴) init() } else { $(header).text(두 번 그려진 잠금 해제 패턴이 일치하지 않음) ; init(); verifyPwd = [] } }}//잠금 해제 기능 Unlock() { console.log(비밀번호 잠금 해제: + puts + + verifyPwd); (compareArr(puts, verifyPwd)) { $(header).text(잠금 해제 성공! 페이지 이동 중...) } else { $(header).text(잠금 해제 패턴이 잘못되었습니다!!!); }$(footer).click(function() { if ($(this).text() === 잠금 해제) { UnlockFlag = true; init(); $(header).text(잠금 해제 패턴 그리기); }});//두 배열(숫자)이 동일한지 비교 function CompareArr(arr1, arr2) { return arr1.toString() === arr2.toString();}추신
이 기사의 전체 데모 온라인 데모 주소
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.