How to detect multi finger touch in ionic app
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.
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.
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>