请教一下怎么实现手触摸屏幕实现类似解锁的功能

Question

如图中看到的手势提示，在这个页面里，按照提示在屏幕上依次滑动链接3个点，再进行下一步动作。
请问实现这个功能，应该怎么写。

Answer 1

可以搜一下现成的手势库。。。很多手势没必要自己写吧

Answer 2

简单来说就是画三个圆点，给每个圆绑定mousedown事件，mousemove的时候，绘制一条起始坐标为按下的圆形，结束坐标为鼠标坐标的path，同时计算鼠标靠近了哪一个圆，直接将path连接到那个圆形，绘制下一条path，每个经过的圆标记一下同时记录相对应的数字并加到一个数组里面，经过3个点表示绘制完成。比如你图中对应的三个点连起来对应的数组为[1, 2, 3]，判断用户是否能进行下一步操作。
patternLock
JS 手势图形解锁

Answer 3

给这三个点父元素绑定touch事件，touchstart,touchmove,touchend,
1.记录touchstart的坐标,如果开始坐标与第一个点坐标相近，相近值自己定义，如果相差太大，后面不用判断了

2.绘画touchmove的轨迹，在每次绘画touchmove时先判定当前点是否跟中间的点相近，如果相近，说明第二个点触摸到。

3.在touchend事件触发时，判断end的坐标点与最后一个点是否相近，相近说明第三个点用户触摸了。
以上三种情况都发生了，用户的手势肯定是正确的了。