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); } }
通过流程图，可以更加清楚的认识到做一个功能需要创建的变量和函数，流程步骤更加清楚，当然也需要制作的过程进行优化。建议制作一些大的功能的时候，如果流程不清楚，最好绘制流程图，思路清晰，开发更快，考虑更周全。
总结
以上所述是小编给大家介绍的微信小程序实现之手势锁详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: