Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
demo
src
README.md

README.md

Description

Pattern-lock

Easier to create a pattern lock.

Online demo: pattern-lock

Quick Start

HTML code

<canvas id="password" width="300px" height="300px" style="display: inline-block;">

JavaScript code

let x = new Wlock({
  container: 'password'
});

API

init

let x = new Wlock({
  /**
   * @param {String} row
   * @param {Number} column
   * @param {Number} opacity background alpha
   * @param {Number} lineColor
   * @param {String} pointBackColor
   * @param {String} pointBorderColor
   * @param {Number} radius touch point radius
   * @param {String} backgroundColor
   */
  container: 'password',
  //option
  row: 3, //default
  //option
  column: 3, //default
  //option
  opacity: 0.0, //default
  //option
  lineColor: 'springgreen', //default
  //option
  pointBackColor: 'white', //default
  //option
  pointBorderColor: 'grey', //default
  //option
  radius: 25, //default
  //option
  backgroundColor: 'whitesmoke' //default
});

x.init() //init

get input

/**
 * @return {Array} input
 */
x.input

Returns an array of objects containing the order of touch points.

If you want to store or transfer the array of objects, you can call the JSON.stringify () function.

clear input

x.clear();

Temporarily change the changeColor

x.changeColor({
  pointBorderColor: 'red',
  lineColor: 'yellow'
});

This method can be used for error warnings and may need to be used in conjunction with the setTimeout() function.

Note

The size of the canvas is specified by the width and height attributes of the element, and not by CSS.

If you are interest in how to make this project, please visit my blog.

You can’t perform that action at this time.