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


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 相关文章推荐
JQuery里选择超链接的实现代码
May 22 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 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
ThinkPHP视图查询详解
2014/06/30 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
Python语法分析之字符串格式化
2019/06/13 Python
Django Rest framework权限的详细用法
2019/07/25 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
Python reques接口测试框架实现代码
2020/07/28 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
青春奉献演讲稿
2014/05/08 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
安全生产协议书
2016/03/22 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
MySQL系列之三 基础篇
2021/07/02 MySQL
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android