h5 usa tela para obter desbloqueio por gestos

Um projeto de aplicativo em que trabalhei recentemente usou o apicloud para alcançar o desenvolvimento de plataforma cruzada. Agora preciso adicionar uma função de desbloqueio por gesto (grade de nove quadrados) a este aplicativo já possui alguns plug-ins de desbloqueio por gesto implementados nativamente por terceiros. porque é nativo e tem melhor desempenho. Bom, é mais conveniente chamá-los, mas seus estilos não podem ser modificados, então pretendo implementar essa função sozinho. Este artigo irá organizar e compartilhar o processo de implementação. Espero que aqueles que precisam possam entendê-lo. O código compartilhado implementa apenas as 设置密码功能, 解锁功能, funções 比较密码, etc. Algumas funções avançadas, como: não é possível limitar o número máximo de vezes que um ponto pode ser passado e limitar o comprimento da senha definida pelo usuário.

Implementação nativa ou outros métodos?

1. Use as plataformas correspondentes de Android e iOS para escrever o plug-in de desbloqueio por gesto por meio de código nativo. A experiência é boa, mas o ciclo de desenvolvimento é longo, os problemas de compatibilidade de cada plataforma precisam ser resolvidos e o método de escrita do plug-in da plataforma APICloud precisa ser aprendido. (desistir)

2. Use a tela HTML5 para implementar. O ciclo de desenvolvimento é curto, não há necessidade de lidar muito com problemas de compatibilidade e a experiência é boa. (escolher)

Use os dedos para conectar nove pontos na tela em sequência para formar um padrão, por isso é chamado de desbloqueio de padrão. Conforme mostrado na imagem acima, cada círculo de desbloqueio é, na verdade, seguido por um número. O que é comparado a cada vez não é o padrão desenhado pelo usuário, mas a sequência de senha composta pelos números abaixo dos círculos que são conectados em série toda vez que o. o dedo passa pelo padrão. Em essência, a comparação ainda é a senha da string, mas da perspectiva do usuário, é um padrão desenhado. A memória de padrões é muito mais forte do que sequências de números.

O desenho do disco de senha é relativamente simples. A única coisa que você precisa prestar atenção é que você precisa usar o cálculo dinâmico para fazer o padrão positivo cercado por nove pontos sempre no meio da tela. precisa subtrair a altura da barra de status.

 var width = $(document).width();var height = $(document).height() - 40 //Subtraia a altura da barra de status do telefone móvel//A grade de nove quadrados tem, na verdade, nove pontos, a; objeto coordenado de 9 pontos var lockCicle = { x: 0, //coordenada x y: 0, //cor da coordenada y: #999999, estado: 1 //status se o ponto atual foi vinculado}; - altura) / 2; //Calcula o deslocamento var arr = []; //Matriz de coordenadas de nove pontos //Método para calcular as coordenadas de nove pontos for (var i = 1; i <= 3; i++) { //Cada linha for (var j = 1; j <= 3; j++) { //Cada var em cada linha lockCicle = {} //Tela horizontal if (offset > 0) { lockCicle.x = (height / 4) * j + Math.abs(offset); lockCicle.y = (altura / 4) * i; lockCicle.state = 0; / 4) * i + Math.abs(offset); lockCicle.state = 0; } arr.push(lockCicle }}//Função método para inicializar a interface). init() { ctx.clearRect(0, 0, width, height); //Limpa a tela pointerArr = [] //Limpa o caminho do desenho for (var i = 0; i < arr.length; i++) { arr [i ].state = 0; //Limpa o estado do desenho drawPointer(i }}//Desenha a interface de desbloqueio de nove quadrados function drawPointer(i) { ctx.save(); (hastouch) { radius = width / 12 } else { radius = 24; var _fillStyle = #dd514c; var _strokeStyle = #dd514c; _strokeStyle = #1bd6c5; } //Desenhe a origem ctx.beginPath(); _fillStyle; ctx.arc(arr[i].x, arr[i].y, 6, 0, Math.PI * 2, false); .beginPath(); ctx.strokeStyle = _strokeStyle; ctx.lineJoin = round; .restore();}//Interface de inicialização init();

 var pointerArr = []; //Matriz de coordenadas de pontos de linha de conexão var startX, startY; //Ponto inicial da linha var puts = []; conectado var pwd = []; //Senha var confirmPwd = []; //Confirmar senha var unlockFlag = false; tela em **/função drawLinePointer(x, y, sinalizador) { ctx.clearRect(0, 0, largura, altura); = redondo; ctx.lineJoin = redondo para (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.stroke(); ctx.closePath(); arr.length; i++) { drawPointer(i); //Desenha o círculo e a origem if (ctx.isPointInPath(x, y) && currentPointer != i) { //Determina se o clique do mouse está no círculo pointerArr.push ({ x: arr[i].x, y: arr[i].y }); startY = arr[i].y; arr[i].state = 1; e2e0e0;ctx.lineWidth = 5;ctx.lineCap = redondo; ctx.moveTo(startX, startY); ctx.restore();

O processo de conexão consiste em combinar três eventos de toque (terminal móvel) para obter as coordenadas da posição atual e colocá-las em uma matriz e, em seguida, renderizar essas coordenadas na interface.

• touchstart (mousedown) Defina isMouseDown=true quando o dedo (mouse) é pressionado, salve as coordenadas do ponto na matriz de linha e desenhe os pontos na matriz.
• touchmove (mousemove) Quando isMouseDown=true, todos os pontos de coordenadas durante o movimento do dedo (mouse) são salvos na matriz de depressão e os pontos na matriz são desenhados.
• mouseup (mouseup) Defina isMouseDown=fasle quando o dedo (mouse) é liberado Desenhe todos os pontos na matriz, limpe a matriz pointerArr e compare o número de pontos conectados se for menor que 6 (definido por você, geralmente. a senha tem mais de 6 dígitos) Avise que o comprimento da senha não é suficiente, limpe a matriz puts e chame novamente o método init para inicializar a interface. Se for maior ou igual a 6, a senha é definida. com sucesso.

 //Escrita de evento compatível com toque móvel var hastouch = ontouchstart na janela ? true : false, tapstart = touchstart : mousedown, tapmove = touchmove : mousemove, tapend = hastouch : 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; ;//Ao mover, salva todos os pontos de coordenadas passados ​​por lockCnavs.addEventListener(tapmove, function(e) { if (isMouseDown) { var x1 = hastouch? e.targetTouches[0].pageX: e.clientX - canvas.offsetLeft; var y1 = hastouch? x1, y1, true }});//Cancelar lockCnavs.addEventListener(tapend, function(e) { drawLinePointer(0, 0, false); isMouseDown = false; pointerArr = []; if (puts.length >= 6) { alert(Sua senha padrão é: [ + puts.join( > ) + ] ); if (unlockFlag) { //Desbloquear unlock() } else { //Definir a senha de desbloqueio settingUnlockPwd(); alert(Sua senha padrão é muito simples~~~); init() } } puts = [];});

Através das etapas acima, os dados e os efeitos de exibição após cada desenho do Jiugongge são desbloqueados. Agora você só precisa adicionar o código lógico correspondente nos principais locais. Aqui apresentamos principalmente sua lógica de implementação sem encapsular o código.

Código relacionado

 //Definir a senha de desbloqueio e a função de teste de desbloqueio settingUnlockPwd() { if (pwd.length <= 0) { pwd = puts; $(header).text(desenhar o padrão de desbloqueio novamente); confirmPwd. length <= 0) { confirmPwd = puts; console.log(pwd + + confirmPwd); confirmPwd.length > 0) { if (compareArr(pwd, confirmPwd)) { $(header).text(Padrão de desbloqueio desenhado com sucesso } else { $(header).text(Padrão de desbloqueio desenhado duas vezes) inconsistente; ); init(); confirmPwd = []; } }}//função de desbloqueio unlock() { console.log(Desbloquear senha: + puts + + confirmPwd); (compareArr(puts, confirmPwd)) { $(header).text(Desbloqueio bem-sucedido! Salto de página... } else { $(header).text(O padrão de desbloqueio está incorreto!!!); }$(footer).click(function() { if ($(this).text() === desbloquear) { unlockFlag = true; init(); $(header).text(desenhar padrão de desbloqueio); }});//Compare duas matrizes (Número) para igualdade function compareArr(arr1, arr2) { return arr1.toString() === arr2.toString();}

pós-escrito

O endereço de demonstração online completo deste artigo

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.