微信小程序实现之手势锁功能实例代码


Posted in Javascript onJuly 19, 2018

设计思路流程图

微信小程序实现之手势锁功能实例代码

1、全局常量

constructor(page,opts){
  // 初始化全局常量数据
  this.page = page;
  this.width = opts.width || 300;
  this.height = opts.height || 300;
  this.canvasId = opts.canvasId || 'lock';
  this.type = opts.type || 3;
  this.cleColor = opts.cleColor || 'rgba(0,136,204,1)';
  this.size = this.width / this.type / 2;//坐标点之间的半间距
  this.R = this.size / 2;//外圆半径
  this.r = this.size / 4;//?仍舶刖
  // 判断是否在缓存中存在密码,如果存在,直接进行第二步骤:解码,如果不存在,进行初始化,设置密码
  this.pswObj = wx.getStorageSync('password') ? {
   step: 2,
   password: JSON.parse(wx.getStorageSync('password'))
  } : { step: 0 };
  // 启动手势锁初始化
  this.init();
 }

2、全局变量

init(){
  const _this = this;
  // 定义全局变量,标记start,手势锁的每个坐标的中心点数组,记录选中数组
  _this.flag = false;
  _this.locationArr = [];
  _this.lastPoint = [];
  _this.restPoint = [];
  // 设置canvas的宽高
  _this.page.setData({
   width : _this.width,
   height : _this.height
  });
  this.ctx = wx.createCanvasContext(this.canvasId, this);
  // 初始化中心坐标数组
  this.location();
  // 初始化绘制图形圆
  this.drawPo();
  // 初始化绑定事件
  this.bindEvent();
 }

3、初始化坐标数组locationArr 和restPoint

location(){
  // 计算坐标的x,y坐标,同时记录当前位置代表的数
  let count = 0,arr = [],arr0 = [];
  for(let i = 0; i < this.type; i++){
   for(let j = 0 ; j < this.type; j++){
    count++;
    arr.push({
     x: this.size * ((j + 1) * 2 - 1),//奇数个坐标间半间距
     y: this.size * ((i + 1) * 2 - 1),//奇数个坐标间半间距
     count: count//每个坐标代表的数
    });
    arr0.push({
     x: this.size * ((j + 1) * 2 - 1),//奇数个坐标间半间距
     y: this.size * ((i + 1) * 2 - 1),//奇数个坐标间半间距
     count: count//每个坐标代表的数
    });
   }
  }
  this.locationArr = arr;
  this.restPoint = arr0;
 }

4、绘制手势锁矩阵

绘制圆函数(bool值判断当前绘制的是空心还是实心)

drawCle(x, y, r, bool){
  // 设置边框颜色。
  bool ? this.ctx.setStrokeStyle(this.cleColor) : this.ctx.setFillStyle(this.cleColor);; // 注意用set
  // 设置线条的宽度。
  this.ctx.setLineWidth(2); // 注意用set
  // 开始创建一个路径,需要调用fill或者stroke才会使用路径进行填充或描边。
  this.ctx.beginPath();
  // 画一条弧线。
  this.ctx.arc(x, y, r, 0, Math.PI * 2, true);
  // 关闭一个路径
  this.ctx.closePath();
  // 画出当前路径的边框。默认颜色色为黑色。
  bool ? this.ctx.stroke():this.ctx.fill();
  // 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
  this.ctx.draw(true);
 }

矩阵绘制

drawPo(){
  // 绘制空心圆,绘制之前,清空canvas,防止重复绘制
  this.ctx.clearRect(0, 0, this.width, this.height);
  this.locationArr.forEach(current => {
   this.drawCle(current.x, current.y, this.R, true);
  });
 }

5、触发move时线的绘制函数

drawLine(po) {// 解锁轨迹
  this.ctx.beginPath();
  // 线宽
  this.ctx.lineWidth = 3;
  // 起始点
  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);
  }
  // 正在移动选择的点
  if (po) { this.ctx.lineTo(po.x, po.y);}
  this.ctx.stroke();
  this.ctx.closePath();
  this.ctx.draw(true);
 }

6、获取当前位置的坐标点函数

getPosition(e) { // 获取touch点相对于canvas的坐标
 return {
  x: e.touches[0].x,
  y: e.touches[0].y
 };
}

7、触发touchstart事件处理

_this.page.onTouchStart = function(e){
 let po = _this.getPosition(e);//获取当前准确坐标
 for (let [key,val] of _this.locationArr.entries()){//循环对比最近的坐标
  if (Math.abs(val.x - po.x) < _this.r && Math.abs(val.y - po.y) < _this.r){
   _this.flag = true;//进入判断,触发touchstart事件成功
   _this.drawCle(val.x, val.y, _this.r, false);//绘制该点的实心内圆
   _this.lastPoint.push(val);//记录该点坐标到lastPoint
   _this.restPoint.splice(key,1);//删除记录数组restPoint的该点坐标
   break;//找到坐标,跳出循环
  }
 }
}

8、触发touchmove事件处理

_this.page.onTouchMove = function (e) {
 _this.flag && _this.updata(_this.getPosition(e));
}

判断是否触发touchstart,如果触发,执行updata函数。

更新最后点坐标函数

updata(po){
  //清空canvas
  this.ctx.clearRect(0, 0, this.width, this.height);
  //重新绘制矩阵
  for (let val of this.locationArr) {
   this.drawCle(val.x, val.y, this.R, true);
  }
  //绘制已记录坐标的实心圆
  for (let val of this.lastPoint) {
   this.drawCle(val.x, val.y, this.r ,false);
  }
  //绘制解锁路线
  this.drawLine(po);
  //找到移动中的还未落点的精确坐标
  for (let [key, val] of this.restPoint.entries()) {
   if (Math.abs(po.x - val.x) < this.r && Math.abs(po.y - val.y) < this.r) {
    this.drawCle(val.x, val.y, this.r, false);
    this.lastPoint.push(val);
    this.restPoint.splice(key, 1);
    break;
   }
  }
 }

9、触发touchend事件处理

_this.page.onTouchEnd = function (e) {
 if(_this.flag){
  _this.flag = false;
  _this.endData();
  _this.checkPassword(_this.lastPoint);
  setTimeout(function () {
   _this.reset();
  }, 500);
 }
}

通过流程图,可以更加清楚的认识到做一个功能需要创建的变量和函数,流程步骤更加清楚,当然也需要制作的过程进行优化。建议制作一些大的功能的时候,如果流程不清楚,最好绘制流程图,思路清晰,开发更快,考虑更周全。

总结

以上所述是小编给大家介绍的微信小程序实现之手势锁详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 #Javascript
微信小程序实现折叠展开效果
Jul 19 #Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 #Javascript
微信小程序实现天气预报功能
Jul 18 #Javascript
vue代理和跨域问题的解决
Jul 18 #Javascript
小程序自定义组件实现城市选择功能
Jul 18 #Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 #Javascript
You might like
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python对列表排序的方法实例分析
2015/05/16 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python爬取成语接龙类网站
2018/10/19 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
深入了解Django View(视图系统)
2019/07/23 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python IDLE添加行号显示教程
2020/04/25 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
师范应届生求职信
2013/11/15 职场文书
中秋节主持词
2014/04/02 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Python find()、rfind()方法及作用
2022/12/24 Python