Comment détecter le toucher multi-doigts dans l'application ionique

Question

Je développe une application ionique.En ce que je veux appliquer 1 doigt glisser et 2 doigt glisser et 3 doigt glisser (Si c'est possible). Si un utilisateur balaie avec un seul doigt, il doit faire défiler et Si l'utilisateur effectue un balayage avec plusieurs doigts, il doit sélectionner le contenu et sélectionner, les options de copie doivent être affichées et 3 doigts pour une action supplémentaire.

modifier: J'ai vérifié le question avant de poster cette question.Je suis en mesure de détecter multi-touch, mais pas 2finger/3 doigt glisser. Je cherche des plugins pour ces actions.

Aidez-moi dans ce numéro.

Answer 1

Regardez comment 4-touch pour reload est mis en œuvre dans le 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); 

Hope this helps.

Answer 2

Je ne suis pas tout à fait sûr, mais vous pourriez essayer d'ajouter un plugin jQuery jGestures qui vous permet d'ajouter des événements de geste comme « pincement », « Pivoter », « swipe », « tap » et « orientationChange » comme natif Événements jQuery. Inclut la substitution d'événement: un événement "tapone" peut être déclenché par un "clic", un "glissement" en effectuant un mousegesture par balayage.

Answer 3

essayer celui-ci pour plus 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>