微信小程式手勢操作之單觸摸點與多觸摸點，小程式手勢

小程式手勢操作之單觸摸點與多觸摸點，小程式手勢

前言

手勢對於一些效果是比較重要的，在canvas、互動等中應用非常廣，看一下小程式手勢是如何的。

Demo

為了研究小程式是否支援多手指，需要使用touchstart,touchmove,touchend

// index.wxml<view id="gestureView" bindtouchstart="touchstartFn" bindtouchmove="touchmoveFn" bindtouchend="touchendFn" ></view>

//index.jstouchstartFn: function(event){  console.log(event); }, touchmoveFn: function(event){  console.log(event);  // console.log("move: PageX:"+ event.changedTouches[0].pageX); }, touchendFn: function(event){  console.log(event);  // console.log("move: PageX:"+ event.changedTouches[0].pageX); }

單觸摸點，多觸摸點

官方文檔:changedTouches

changedTouches 資料格式同 touches。 表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。

"changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14}]

真機效果

實現以上Demo後模擬器是無法看到多觸摸點的資料的，所以你需要真機來測試。

看下真機的log資訊

在changedTouches中按順序儲存觸摸點的資料，所以小程式本身支援多觸摸點的手勢

結論

設想: 既然小程式的手勢是支援多觸摸，而且可以擷取到相關的路徑，那麼相關路徑計算也是可行的。

情境: 多觸摸互動效果，手指繪製等

觸摸點資料儲存

為了能夠來分析觸摸點的路徑，最起碼是簡單的手勢，如左滑、右滑、上滑、下滑，我們需要儲存起路徑的所有資料。

觸摸事件

觸摸觸發事件分為"touchstart", "touchmove", "touchend","touchcancel"四個

詳見:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html20

儲存資料

var _wxChanges = [];var _wxGestureDone = false;const _wxGestureStatus = ["touchstart", "touchmove", "touchend","touchcancel"];// 收集路徑function g(e){  if(e.type === "touchstart"){    _wxChanges = [];    _wxGestureDone = false;  }  if(!_wxGestureDone){    _wxChanges.push(e);    if(e.type === "touchend"){      _wxGestureDone = true;     }else if(e.type === "touchcancel"){      _wxChanges = [];      _wxGestureDone = true;     }  }}

結尾

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