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

设计思路流程图

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);
 }
}

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

总结

以上所述是小编给大家介绍的微信小程序实现之手势锁详解，希望对大家有所帮助