आयनिक ऐप में बहु उंगली स्पर्श का पता लगाने के लिए

Question

मैं एक आयनिक ऐप विकसित कर रहा हूं। इसमें मैं 1 उंगली स्वाइप और 2 उंगली स्वाइप और 3 उंगली स्वाइप (यदि यह संभव है) लागू करना चाहते हैं। यदि कोई उपयोगकर्ता एकल उंगली से स्वाइप करता है, तो उसे स्क्रॉल करना चाहिए और यदि उपयोगकर्ता बहु उंगली से स्वाइप करता है, तो उसे सामग्री का चयन करना चाहिए और चयन करना चाहिए, प्रतिलिपि विकल्प दिखाना चाहिए और एक और कार्रवाई के लिए 3 उंगली स्वाइप करना चाहिए।

संपादित करें: मैंने इस प्रश्न को पोस्ट करने से पहले 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

@arainone नहीं नकल अधिक 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>