微信小程序手势探索：单触摸点与多触摸点

前言 
手势对于一些效果是比较重要的，在canvas、交互等中应用非常广，看一下微信小程序手势是如何的。

Demo 
为了研究小程序是否支持多手指，需要使用touchstart,touchmove,touchend

1. // index.wxml
2. <view id=”gestureView” bindtouchstart=”touchstartFn” bindtouchmove=”touchmoveFn” bindtouchend=”touchendFn” >
3. </view>

1. //index.js
2. touchstartFn: function(event){
3. console.log(event);
4. },
5. touchmoveFn: function(event){
6. console.log(event);
7. // console.log(“move: PageX:”+ event.changedTouches[0].pageX);
8. },
9. touchendFn: function(event){
10. console.log(event);
11. // console.log(“move: PageX:”+ event.changedTouches[0].pageX);
12. }

单触摸点，多触摸点

官方文档:changedTouches  changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

1. “changedTouches”:[{
2. “identifier”:0, “pageX”:53, “pageY”:14, “clientX”:53, “clientY”:14
3. }]

真机效果  实现以上Demo后模拟器是无法看到多触摸点的数据的，所以你需要真机来测试。

看下真机的log信息 

(此图片来源于网络，如有侵权，请联系删除! )

在changedTouches中按顺序保存触摸点的数据，所以小程序本身支持多触摸点的手势

结论  设想: 既然小程序的手势是支持多触摸，而且可以获取到相关的路径，那么相关路径计算也是可行的。  场景: 多触摸交互效果，手指绘制等

触摸点数据保存

为了能够来分析触摸点的路径，最起码是简单的手势，如左滑、右滑、上滑、下滑，我们需要保存起路径的所有数据。  触摸事件  触摸触发事件分为”touchstart”, “touchmove”, “touchend”,”touchcancel”四个  详见:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html20

存储数据

1. var _wxChanges = [];
2. var _wxGestureDone = false;
3. const _wxGestureStatus = [“touchstart”, “touchmove”, “touchend”,”touchcancel”];
4. // 收集路径
5. function g(e){
6. if(e.type === “touchstart”){
7. _wxChanges = [];
8. _wxGestureDone = false;
9. }
10. if(!_wxGestureDone){
11. _wxChanges.push(e);
12. if(e.type === “touchend”){
13. _wxGestureDone = true;
14. }else if(e.type === “touchcancel”){
15. _wxChanges = [];
16. _wxGestureDone = true;
17. }
18. }
19. }

结尾  这篇文章，主要探索一下，希望你也可以提前看一下手势的解析。

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。