如何在离子应用程序中检测多指触摸

Posted 2023-02-19

【中文标题】如何在离子应用程序中检测多指触摸

【英文标题】：How to detect multi finger touch in ionic app

【发布时间】：2016-04-11 12:59:46

【问题描述】：

我正在开发一个 Ionic 应用程序。我想应用 1 个手指滑动和 2 个手指滑动和 3 个手指滑动（如果可能的话）。 在 div 中，如果用户用单指滑动，它应该滚动并 如果用户用多指滑动，它应该选择内容并选择，应该显示复制选项，然后用 3 根手指滑动以执行更多操作。

编辑： 在发布此问题之前，我检查了question。我能够检测到多点触控，但不能检测到 2 指/3 指滑动。我正在寻找任何用于此操作的插件。

帮助我解决这个问题。

【问题讨论】：

不重复@arainone .. 多点触控我能够检测到但不能检测到多指滑动.. 在你提到的那个问题中，它是多点触控事件

对不起，我会删除

jgestures.codeplex.com

【参考方案1】：

看看Phonegap Developer App 中如何实现 4-touch for reload：

var currentTouches = ,
    eventName =  touchstart: 'touchstart', touchend: 'touchend' ;

if (window.navigator.msPointerEnabled) 
    eventName =  touchstart: 'MSPointerDown', touchend: 'MSPointerUp' ;


document.addEventListener(eventName.touchstart, function(evt) 
    var touches = evt.touches || [evt],
        touch;
    for(var i = 0, l = touches.length; i < l; i++) 
        touch = touches[i];
        currentTouches[touch.identifier || touch.pointerId] = touch;
    
);

document.addEventListener(eventName.touchend, function(evt) 
    var touchCount = Object.keys(currentTouches).length;
    currentTouches = ;
    if (touchCount === 4) 
        evt.preventDefault();
        window.location.reload(true);
    
, false);

希望这会有所帮助。

【参考方案2】：

我不太确定，但您可以尝试添加一个 jQuery 插件 jGestures 使您能够像原生 jQuery 事件一样添加手势事件，例如“捏”、“旋转”、“滑动”、“点击”和“方向改变”。包括事件替换：“点击”可以触发“tapone”事件，通过执行滑动鼠标手势可以触发“滑动”。

【参考方案3】：

试试这个更多https://codepen.io/edisonpappi/pen/LyqrXw

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl',  function($scope, $ionicGesture) 

  $scope.messages = [];
  var touchpad = angular.element(document.querySelector('#touchpad'));
  var maxFingers = 10;
  var fingers = [];
  for(var i=0; i<maxFingers; i++)  fingers.push(angular.element(document.querySelector('#t'+i)))
  $scope.touches = new Array;
  
  var resetTransformations = function()
    for(var i=0;i<maxFingers;i++)
      fingers[i].css("transform": "translate3D(0px, 0px, 0px)");
  
  
  $ionicGesture.on('dragstart',
                   function (event) 
    $scope.messages.push(txt: "dragstart");
  , touchpad);
    $ionicGesture.on('dragend',
                   function (event) 
    $scope.messages.push(txt: "dragend");
  , touchpad);
  $ionicGesture.on('transformstart',
                   function (event) 
    $scope.messages.push(txt: "transformstart");
  , touchpad);
  $ionicGesture.on('transformend',
                   function (event) 
    $scope.messages.push(txt: "transformend");
  , touchpad);
  
  // keep track if a finger is released: 
  var fingersDown = 0;
  
  // drag = 1 finger, transform = more
  $ionicGesture.on('transform drag',
                   function (event) 
    if(fingersDown > event.gesture.touches.length)
      resetTransformations();  
    fingersDown = event.gesture.touches.length;

    $scope.touches = [];
    var identifier = 0;
    for(var i=0; i<event.gesture.touches.length; i++)
      identifier = parseInt(event.gesture.touches[i].identifier);
      $scope.touches[i] = pageX: parseInt(event.gesture.touches[i].pageX), pageY: parseInt(event.gesture.touches[i].pageY), id: identifier;
      
      fingers[identifier].css("transform": "translate3D("+event.gesture.touches[i].pageX+"px, "+event.gesture.touches[i].pageY+"px, 0px)");
    

      $scope.$apply();
  , touchpad);
  
 
  $ionicGesture.on('release',
                   function (event) 
    $scope.touches = [];
    $scope.$apply();
    $scope.messages.push(txt: "release");
    resetTransformations();
  , touchpad);  
  $ionicGesture.on('touch',
                   function (event) 
    $scope.messages.push(txt: "touch");
  , touchpad);
  

  
  
);


  

body 
  cursor: url('http://ionicframework.com/img/finger.png'), auto;

.full
  width: 100%;
  height: 100%;

h4.full
  color: #FFF;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;  

.debug
  color: #fff;
  padding-left: 10px;
  font-size: 12px;
  line-height: 12px;

.circle
  position: absolute;
  color: #fff;
  top: -44px;
  left: 0px;
  margin-left: -30px;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: rgba(255,255,255,0.62);

#container
  padding-top: 38%;
  z-index: 1;
  position: absolute;
  background: url("https://unsplash.imgix.net/46/yzS7SdLJRRWKRPmVD0La_creditcard.jpg?q=75&fm=jpg&s=7cc01cbdd45363cc0e2e8340b185bca2");
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>VELOCITY + IONIC</title>
    
    <!-- add touch emulation hold SHIFT-key while using the mouse -->
    <script src="http://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script>
    <script>TouchEmulator();</script>

    <link href="//code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>

  </head>

  <body ng-controller="MainCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">TRACKING MANY FINGERS</h1>
    </ion-header-bar>
             
    <ion-content class="full" scroll="false"> 
      <h4 id="touchpad" class="full padding">Drag below with > 1 fingers.<br />Press and hold Shift + mouse key to emulate multitouch on a computer.</h4>
      <div class="full world padding">
        <div id="container">
          <div class="debug" ng-repeat="touch in touches">
            touches[$index] = FINGER <strong>touch.id</strong>:  (touch.pageX,  touch.pageY)
          </div>
          <div class="debug" ng-repeat="msg in messages">msg.txt</div>
          
          <div id="t0" class="circle">0</div>
          <div id="t1" class="circle">1</div>
          <div id="t2" class="circle">2</div>
          <div id="t3" class="circle">3</div>
          <div id="t4" class="circle">4</div>
          <div id="t5" class="circle">5</div>
          <div id="t6" class="circle">5</div> 
          <div id="t7" class="circle">7</div> 
          <div id="t8" class="circle">8</div>
          <div id="t9" class="circle">9</div> 
          
        </div>
   
        
      </div>
      
     
    </ion-content>
    
  </body>
</html>