移动端手势密码
首先进行技术选型,我个人比较青睐canvas:
优点: 其整体各种API比较全面 - 同时可以进行相互嵌套,重绘性能也还不错 不足: 其在DOM中是整体存在的 - canvas操作API数目多,比较繁琐最后我决定创建三重画布,当然上面的一切其实都是静态的,但事件和交互赋予了他们生命,第一层canvas为最后一条活动的线,第二层canvas为特殊颜色的圆以及圆中的图片,第三层为背景圆基本不动
设置监听touch事件三部曲,针对不同的鼠标移动进行不同层canvas的刷新,过程中进行函数节流
进行功能的逻辑判断,这个只要记录下状态进行比对就没问题了
计划分为五步:1.熟悉canvasAPI,制作出界面以及基本动画效果,3月25日前完成(3.25)
2.完善所需数据组合,完成设锁逻辑和解锁逻辑,3月27日前完成(好像稍微加了一些封装哦 3.27)
3.完成各部分解耦封装,只保留统一接口供调用,并提供适当扩展参数选项,3月29日前完成(好像稍微提前了一些哦 3.28)
4.改善UI并适当改善逻辑(逻辑应该还有改善余地,UI更是,未完待续 3.29)
5.改善代码细节问题,规范化
6.追加:canvas渲染机制分层,API改良(暴露过程行为和外观)
new lockr({ customStyle: false, //boolean 是否自定义样式 checkBtn: document.querySelector('#testRadio'), //check单选框 updataBtn: document.querySelector('#setRadio'), //updata单选框 hint: document.querySelector('#hint'), //消息提示框 background: 'url("background2.jpeg")', //url container背景 textColor: '#fff', //文字颜色 rightColor: '#8cf939', //选择正确后空心圆的颜色 wrongColor: '#fb4920', //选择错误后空心圆的颜色 canvasWidth: false, //是否自定义canvas宽度 chooseType: 3, //手势密码圆数量 默认为3*3 render: true, //自动渲染 originR: 0.3, //半径占圆心距的比例 customFilledPicUrl: `./yellowMan/filledPic.png`, //填充空心圆图片相对路径,filledPic + index确认唯一图片---形如`./yellowMan/filledPic${index}.png` customFilledPicNumber: 19, //填充空心圆图片的总数 minPoint: 5, //手势密码的最小连接数目 })
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。