当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 手势开发教程,微信小程序单触摸电与多触摸点

手势开发教程,微信小程序单触摸电与多触摸点

2018-06-12 10:23 来源: 霸界科技

摘要:微信小程序开发是否支持多触摸点,即多手指的触屏使用,根据官方给出的开发文档说明,我们这一次的研究需要使用到touchstart、touchmove与touchend。...

期权保本理财
  在微信小程序的开发过程中,手势常常被应用在canvas、交互的开发中,所以手势对一些开发效果来说是比较重要的。本文我们探讨的是,微信小程序开发是否支持多触摸点,即多手指的触屏使用,根据官方给出的开发文档说明,我们这一次的研究需要使用到touchstart、touchmove与touchend。
 
手势开发教程,微信小程序的单触摸电与多触摸点
 
  1、Demo
 
  // 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);
 
  }
 
  2、单触摸点、多触摸点分析
 
  changedTouches 数据格式与touches相同,表示有变化的触摸点,如从无变有(touchstart)、位置变化(touchmove)、从有变无(touchend、touchcancel)。
 
  "changedTouches":[{
 
  "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14
 
  }]
 
  3、真机测试效果
 
  实现以上Demo之后,模拟器无法看到多触摸点额的相关数据,需要真机测试来查看效果。
 
  4、结论分析
 
  在changedTouches中可以按顺序保存触摸点的数据,因此,小程序本身也是支持多触摸点手势开发的,而且通过这类开发可以获取到相关的路径,对相关路径也可以进行计算。这种多触摸点可以被运用在多触摸交互效果、手指绘制等方面上。
 
  5、触摸点的数据保存
 
  为了能够分析触摸点的路径,需要保存起路径的所有数据。数据存储代码如下:
 
  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;
 
  }
 
  }
 
  }
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088