(function(){
var wxlocker = function(obj){
this.chooseType = 3; // 3*3的圆点格子
};
wxlocker.prototype.drawCle = function(x, y) { // 初始化解锁密码面板
this.ctx.setStrokeStyle('#10AEFF');
this.ctx.setLineWidth(1);
this.ctx.beginPath();
this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.stroke();
}
wxlocker.prototype.drawPoint = function() { // 初始化圆心
for (var i = 0 ; i < this.lastPoint.length ; i++) {
this.ctx.setFillStyle('#10AEFF');
this.ctx.beginPath();
this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.fill();
}
}
wxlocker.prototype.drawStatusPoint = function(type) { // 初始化状态线条
for (var i = 0 ; i < this.lastPoint.length ; i++) {
this.ctx.setStrokeStyle(type);
this.ctx.beginPath();
this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.stroke();
}
wx.drawCanvas({
canvasId: "locker",
actions: this.ctx.getActions(),
reserve:true
});
}
wxlocker.prototype.drawLine = function(po, lastPoint) {// 解锁轨迹
this.ctx.beginPath();
this.ctx.setLineWidth(1);
this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
for (var i = 1 ; i < this.lastPoint.length ; i++) {
this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
}
this.ctx.lineTo(po.x, po.y);
this.ctx.stroke();
this.ctx.closePath();
}
wxlocker.prototype.createCircle = function() {// 创建解锁点的坐标,根据canvas的大小来平均分配半径
var cavW = this.setCanvasSize().w;
var cavH = this.setCanvasSize().h;
var n = this.chooseType;
var count = 0;
this.r = cavW / (2 + 4 * n);// 公式计算
this.lastPoint = [];
this.arr = [];
this.restPoint = [];
var r = this.r;
for (var i = 0 ; i < n ; i++) {
for (var j = 0 ; j < n ; j++) {
count++;
var obj = {
x: j * 4 * r + 3 * r,
y: i * 4 * r + 3 * r,
index: count
};
this.arr.push(obj);
this.restPoint.push(obj);
}
}
// this.ctx.clearRect(0, 0, cavW, cavH);
for (var i = 0 ; i < this.arr.length ; i++) {
this.drawCle(this.arr[i].x, this.arr[i].y);
}
wx.drawCanvas({
canvasId: "locker",
actions: this.ctx.getActions(),
reserve:false
});
//return arr;
}
wxlocker.prototype.getPosition = function(e) {// 获取touch点相对于canvas的坐标
// var rect = e.target;
var po = {
x: e.touches[0].x,
y: e.touches[0].y
};
return po;
}
wxlocker.prototype.update = function(po) {// 核心变换方法在touchmove时候调用
var cavW = this.setCanvasSize().w;
var cavH = this.setCanvasSize().h;
this.ctx.clearRect(0, 0, cavW, cavH);
for (var i = 0 ; i < this.arr.length ; i++) { // 每帧先把面板画出来
this.drawCle(this.arr[i].x, this.arr[i].y);
}
this.drawPoint();// 每帧画圆心
this.drawLine(po , this.lastPoint);// 每帧画轨迹
for (var i = 0 ; i < this.restPoint.length ; i++) {
if (Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r) {
this.drawPoint();
this.lastPoint.push(this.restPoint[i]);
this.restPoint.splice(i, 1);
break;
}
}
}
wxlocker.prototype.checkPass = function(psw1, psw2) {// 检测密码
var p1 = '',
p2 = '';
for (var i = 0 ; i < psw1.length ; i++) {
p1 += psw1[i].index + psw1[i].index;
}
for (var i = 0 ; i < psw2.length ; i++) {
p2 += psw2[i].index + psw2[i].index;
}
return p1 === p2;
}
wxlocker.prototype.storePass = function(psw,cb) {// touchend结束之后对密码和状态的处理
if (this.pswObj.step == 1) {//step==1表示还没有设置密码状态
if (this.checkPass(this.pswObj.fpassword, psw)) {
this.pswObj.step = 2;
this.pswObj.spassword = psw;
this.resetHidden = false;
this.title = "密码保存成功";
this.titleColor = "succ";
this.drawStatusPoint('#09bb07');
wx.setStorageSync('passwordxx', JSON.stringify(this.pswObj.spassword));
// wx.setStorageSync('chooseType', this.chooseType);
} else {
this.title = "两次绘制不一致,重新绘制";
this.titleColor = "error";
this.drawStatusPoint('#e64340');
delete this.pswObj.step;
}
} else if (this.pswObj.step == 2) {
if (this.checkPass(this.pswObj.spassword, psw)) {
this.title = "解锁成功";
this.titleColor = "succ";
this.drawStatusPoint('#09bb07');
cb();
} else {
this.title = "解锁失败";
this.titleColor = "error";
this.drawStatusPoint('#e64340');
}
} else {
if(this.lastPoint.length<4){
this.title="密码过于简单,请至少连接4个点";
this.resetHidden = true;
this.titleColor = "error";
return false;
}else{
this.pswObj.step = 1;
this.pswObj.fpassword = psw;
this.titleColor = "";
this.title = "再次输入";
}
}
}
wxlocker.prototype.makeState = function() {
if (this.pswObj.step == 2) {
this.resetHidden = false;
this.title = "请解锁";
this.titleColor = "";
} else if (this.pswObj.step == 1) {
this.title="请设置手势密码";
this.resetHidden = true;
this.titleColor = "";
} else {
this.title="请设置手势密码";
this.resetHidden = true;
this.titleColor = "";
}
}
wxlocker.prototype.updatePassword = function(){//点击重置按钮,重置密码
wx.removeStorageSync("passwordxx");
// wx.removeStorageSync("chooseType");
this.pswObj = {};
this.title="请设置手势密码";
this.resetHidden = true;
this.titleColor = "";
this.reset();
}
wxlocker.prototype.init = function() {//初始化锁盘
this.pswObj = wx.getStorageSync('passwordxx') ? {
step: 2,
spassword: JSON.parse(wx.getStorageSync('passwordxx'))
微信小程序开发-工具类-手势解锁案例源码.zip
版权申诉
106 浏览量
2021-11-21
16:47:18
上传
评论
收藏 102KB ZIP 举报
![avatar](https://profile-avatar.csdnimg.cn/815ca1bfc49f40debbd9519fc559dabb_weixin_55688630.jpg!1)
小小姑娘很大
- 粉丝: 4120
- 资源: 2348
最新资源
- .gif动态图制作工具软件,ScreenToGif
- baidusearch_AndroidPhone_13-58-5-10-1_1013790t.apk
- CFA学习资料(2024最新考纲,包含全部十个科目的讲义、思维导图及练习题)
- 绘制爱心(1).zip
- 使用Python计算扑克牌算法
- Matlab实现Transfomer多变量时间序列预测,风电功率预测(完整源码和数据)
- vsftpd-3.0.5及编译脚本(交叉编译)
- Matlab实现Transfomer时间序列预测,风电功率预测(完整源码和数据)
- amap-wx.130.js
- 高分项目,PID-小车类-两轮平衡小车(原理图、PCB、程序源码、BOM等)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)