イオンアプリでマルチフィンガータッチを検出する方法

Question

イオンアプリを開発しています.1指スワイプと2指スワイプと3指スワイプを適用したいです。 ユーザーが1本の指でスワイプすると、スクロールして マルチフィンガーでスワイプすると、コンテンツを選択して選択して、コピーオプションを表示し、さらに3回スワイプして1回のアクションを実行する必要があります。

編集： この質問を投稿する前にquestionを確認しました。マルチタッチは検出できますが、2フィンガー/ 3指スワイプは検出できません。私はこのアクションのためのプラグインを探しています。

この問題で私を助けてください。

Answer 1

リロードの4 - タッチがPhonegap Developer Appに実装されている方法を見て：

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

は、この情報がお役に立てば幸いです。

Answer 2

jQueryプラグインを追加しようとするかもしれません。 jGestures「ピンチ」、「回転」、「スワイプ」、「タップ」、「orientationchange」などのジェスチャーイベントをネイティブと同じように追加できますjQueryイベント。イベントの置換を含む：「タップーン」イベントは、スワイプのマウスジェスチャーを実行することによって「クリック」、「スワイプ」によってトリガーされます。

Answer 3

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>