How to detect multi finger touch in ionic app

Question

I am developing an Ionic app.In that I want to apply 1 finger swipe and 2 finger swipe and 3 finger swipe ( If it is possible ). In a div if user swipes with single finger, it should scroll and If user swipes with multi finger , it should select the content and select,copy options should be shown and 3 finger swipe for one more action.

edit: I checked the question before posting this question.I am able to detect multi touch but not 2finger / 3 finger swipe. I am looking for any plugins for this actions.

Help me in this issue.

Answer 1

Look how 4-touch for reload is implemented in the 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

I am not quite sure but you might try adding a jQuery plugin jGestures that enables you to add gesture events such as 'pinch', 'rotate', 'swipe', 'tap' and 'orientationchange' just like native jQuery events. Includes event substitution: a "tapone" event can be triggered by "clicking", a "swipe" by performing a swipe-ish mousegesture.

Answer 3

try this one for more 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>