微信小程序手勢(shì)操作之單觸摸點(diǎn)與多觸摸點(diǎn)

更新時(shí)間：2017年03月10日 15:43:18 作者：Di

這篇文章主要介紹了微信小程序手勢(shì)操作之單觸摸點(diǎn)與多觸摸點(diǎn)的相關(guān)資料,需要的朋友可以參考下

前言

手勢(shì)對(duì)于一些效果是比較重要的，在canvas、交互等中應(yīng)用非常廣，看一下微信小程序手勢(shì)是如何的。

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);
 }

單觸摸點(diǎn)，多觸摸點(diǎn)

官方文檔:changedTouches

changedTouches 數(shù)據(jù)格式同 touches。表示有變化的觸摸點(diǎn)，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。

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

真機(jī)效果

實(shí)現(xiàn)以上Demo后模擬器是無法看到多觸摸點(diǎn)的數(shù)據(jù)的，所以你需要真機(jī)來測(cè)試。

看下真機(jī)的log信息

在changedTouches中按順序保存觸摸點(diǎn)的數(shù)據(jù)，所以小程序本身支持多觸摸點(diǎn)的手勢(shì)

結(jié)論

設(shè)想: 既然小程序的手勢(shì)是支持多觸摸，而且可以獲取到相關(guān)的路徑，那么相關(guān)路徑計(jì)算也是可行的。

場(chǎng)景: 多觸摸交互效果，手指繪制等

觸摸點(diǎn)數(shù)據(jù)保存

為了能夠來分析觸摸點(diǎn)的路徑，最起碼是簡(jiǎn)單的手勢(shì)，如左滑、右滑、上滑、下滑，我們需要保存起路徑的所有數(shù)據(jù)。

觸摸事件

觸摸觸發(fā)事件分為"touchstart", "touchmove", "touchend","touchcancel"四個(gè)

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

存儲(chǔ)數(shù)據(jù)

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; 
    }
  }
}

結(jié)尾

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

您可能感興趣的文章: