手势密码解锁插件

最新推荐文章于 2023-11-21 16:29:34 发布

小呀嘛麻

最新推荐文章于 2023-11-21 16:29:34 发布

阅读量1k

点赞数 2

分类专栏：插件文章标签：插件手势密码

本文链接：https://blog.csdn.net/Ariana_l/article/details/89095404

版权

本文介绍了作者封装的一款移动端手势密码插件，采用canvas技术提高画图流畅性。该插件源码已上传至GitHub，提供了示例及参数调整方法，并欢迎大家反馈问题和改进意见。

摘要由CSDN通过智能技术生成

最近一个移动端的页面用到了手势密码，所以就花了点时间封装了一个插件，使用的是canvas来进行画图，比起操作dom来要流畅，文件地址放到了GitHub库里：

https://github.com/Mollyll/plugins/tree/master/lock

示例：

var unlockFlag = !1; 
var lock = new Lock({
        strokeColor: "#6144fc", // 描边颜色
        fillColor: "#685EFC", // 填充颜色
        width: $(document).width(), // Number
        height: $(document).height(), // Number height >= width
        canvasId: 'container_lock', // 用_作为连接父元素id和canvasid,不能为空
        unlockFlag: unlockFlag, // 是否是解锁，true为解锁，false为设置手势密码
        firstLock: function (pwd) { // 第一次设置手势密码成功回调
            console.log("再次绘制解锁图案")
        },
        finalLock: function (pwd, state) { // 只有二次验证失败时会调这个函数
            console.log("解锁图案不一致，请重新设置")
        },
        initCallback: function (module) {
            console.log