手势解锁密码的 demo
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit b74751f Apr 7, 2017
Permalink
Failed to load latest commit information.
doc 📝 update doc Apr 6, 2017
example 🐛bug fixed Apr 6, 2017
lib support retina Apr 7, 2017
script update Apr 6, 2017
.babelrc 🎉first commit! Apr 5, 2017
.gitignore update Apr 6, 2017
README.md :memo update README Apr 7, 2017
package.json support retina Apr 7, 2017
webpack.config.js 🎉first commit! Apr 5, 2017

README.md

手势密码设置和解锁的实现

这是第三届360前端星计划在线作业的参考实现。

在线例子

在线示例

扫描二维码

安装和使用

直接在浏览器里引用:

<script src="https://s2.ssl.qhres.com/!9f2db498/HandLock-0.2.1.min.js"></script>

API

Locker

创建一个可以设置密码和验证密码的实例

var password = '11121323';

var locker = new HandLock.Locker({
  container: document.querySelector('#handlock'),
  check: {
    checked: function(res){
      if(res.err){
        console.error(res.err); //密码错误或长度太短
      }else{
        console.log(`正确,密码是:${res.records}`);
      }
    },
  },
  update:{
    beforeRepeat: function(res){
      if(res.err){
        console.error(res.err); //密码长度太短
      }else{
        console.log(`密码初次输入完成,等待重复输入`);
      }
    },
    afterRepeat: function(res){
      if(res.err){
        console.error(res.err); //密码长度太短或者两次密码输入不一致
      }else{
        console.log(`密码更新完成,新密码是:${res.records}`);
      }
    },
  }
});

locker.check(password);

几种 err 状态

  • ERR_NOT_ENOUGH_POINTS 绘制的点数量不足,默认为最少4个点
  • ERR_PASSWORD_MISMATCH 密码不一致,check时密码不对或者update时两次输入密码不一致
  • ERR_USER_CANCELED 用户切换验证或设置操作时,取消当前的状态

可配置的参数

//recorder.js
const defaultOptions = {
  container: null, //创建canvas的容器,如果不填,自动在 body 上创建覆盖全屏的层
  focusColor: '#e06555',  //当前选中的圆的颜色
  fgColor: '#d6dae5',     //未选中的圆的颜色
  bgColor: '#fff',        //canvas背景颜色
  n: 3, //圆点的数量: n x n
  innerRadius: 10,  //圆点的内半径
  outerRadius: 25,  //圆点的外半径,focus 的时候显示
  touchRadius: 35,  //判定touch事件的圆半径
  render: true,     //自动渲染
  customStyle: false, //自定义样式
  minPoints: 4,     //最小允许的点数
};
//locker.js
const defaultOptions = {
  update: {
    beforeRepeat: function(){}, //更新密码第一次输入后的事件
    afterRepeat: function(){}   //更新密码重复输入后的事件
  },
  check: {
    checked: function(){} //校验密码之后的事件
  }
}

clearPath()

清除 canvas 上选中的圆。

cancel()

取消当前状态,用于update/check状态切换。

修改和发布代码

下载仓库并安装依赖:

npm install

启动服务:

npm start

发布代码:

npm run deploy

License

MIT