Android-como patrón de bloqueo en Vanilla JavaScript-PatternLockJS
| Autor: | phenax |
|---|---|
| Views Total: | 2,782 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 20, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Un plugin de JavaScript vainilla utilizado para simular la interfaz de bloqueo de patrón basado en el lienzo HTML5 de Android para administrar las contraseñas en su aplicación Web.
Funcionamiento
Incluya el archivo JavaScript principal en su página HTML.
<script src='PatternLock.js'></script>
Cree un elemento canvas en el que desee dibujar la interfaz de bloqueo de patrón.
<canvas id='patternLock'></canvas>
Inicialice PatternLockJS y done.
const patternLock= new PatternLockJS({
el: '#patternLock'
}); Configuración de la interfaz de bloqueo de patrón mediante las siguientes opciones.
const patternLock= new PatternLockJS({
accent: '#1abc9c',
primary: '#ffffff',
bg: '#2c3e50',
dimens: {
line_width: 6,
node_radius: 28,
node_core: 8,
node_ring: 1,
}
}); Genere la cuadrícula de nodos.
// rows: The number of horizontal nodes // cols: The number of vertical nodes patternLock.generateGrid(rows, cols)
Adjunte detectores de eventos e inicie bucles de fotogramas
patternLock.start()
Ejecute una función de devolución de llamada cuando el patrón esté completo:
patternLock.onPatternComplete= nodes => {
// Check if the pattern is right
};
