微信小程序手勢操作之單觸摸點與多觸摸點的示例分析

這篇文章給大家分享的是有關微信小程序手勢操作之單觸摸點與多觸摸點的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

Demo

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

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

//index.js
touchstartFn: 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; 
    }
  }
}

感謝各位的閱讀！關于“微信小程序手勢操作之單觸摸點與多觸摸點的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！