Vanilla JavaScript 에서 패턴 잠금 – PatternLockJS

Vanilla JavaScript 에서 패턴 잠금 – PatternLockJS

 

 

웹 앱에서 비밀번호를 관리하기 위해 Android와 유사한 HTML5 캔버스 기반 패턴 잠금 인터페이스를 시뮬레이션하는 데 사용되는 바닐라 JavaScript 플러그인입니다.

 

 

 

HTML 페이지에 기본 JavaScript 파일을 포함 합니다.

 

<script src='PatternLock.js'></script>

 

패턴 잠금 인터페이스를 그릴 캔버스 요소를 만듭니다.

 

 

<canvas id='patternLock'></canvas>

 

 

PatternLockJS를 초기화하고 완료하세요.

 

 

const patternLock= new PatternLockJS({ el: '#patternLock' });

 

다음 옵션을 사용하여 패턴 잠금 인터페이스를 구성합니다.

 

 

const patternLock= new PatternLockJS({
      accent: '#1abc9c',
      primary: '#ffffff',
      bg: '#2c3e50',
      dimens: {
        line_width: 6,
        node_radius: 28,
        node_core: 8,
        node_ring: 1,
      }
});

 

노드 그리드를 생성합니다.

 

 

// rows: The number of horizontal nodes
// cols: The number of vertical nodes
patternLock.generateGrid(rows, cols)

 

이벤트 리스너 연결 및 프레임 루프 시작

 

 

patternLock.start()

 

패턴이 완료되면 콜백 함수를 실행합니다.

 

 

patternLock.onPatternComplete= nodes => {
  // Check if the pattern is right
};

 

 

html 현황

<div class='pattern-container'>

	<div class='title'>PatternLockJS Demo</div>
	<div class='subtitle'>Draw unlock pattern to generate a hash</div>

	<br />

	<canvas id='patternLock'></canvas>
	<div class='password'>
		Your password is: <input class='js-password' type='text' />
	</div>

</div>

<script src='./js/PatternLock.js'></script>
<script src='./js/script.js'></script>

 

script.js

((PatternLock) => {

	document.addEventListener('DOMContentLoaded', () => {

		const patternLock= new PatternLock({
			el: '#patternLock',
			dimens: { width: 300, height: 430 },
		});

		patternLock.setTheme({
			accent: '#1abc9c',
			dimens: {
				node_radius: 20,
			}
		});

		patternLock.generateGrid(3, 3);
		patternLock.start();



		const $password= document.querySelector('.js-password');

		patternLock.onPatternComplete= nodes => {

			const password= PatternLock.patternToWords(nodes);

			$password.value= PatternLock.hashCode(password);
		};
	});

})(window.PatternLock);

 

 

www.cssscript.com/demo/android-like-pattern-lock-vanilla-javascript/

PatternLockJS Demo

 

pattern-lock-js-master.zip

0.09MB