Touch coordinates? (touchmove)

I’m trying to get the coordinates of a touch, but I am not having any luck.

To be clear, I am not looking for gestures, but just for the current position of a touch on an element.

For example, if I just have a blank ion-content, with scroll disabled, then on dragging (touchmove) I want to get the x,y position. It seems like I should be able to just use ontouchmove or on-drag, or something, but none of them seem to fire.

Any tips?

Internally we’re using ionic.tap.pointerCoord(event), but it’s exposed publicly so you should be able to use it fine too, or you could just copy/paste the code and have your own version:
https://github.com/driftyco/ionic/blob/master/js/utils/tap.js#L274

This is what I did. Works for me on iOS 8. But I didn’t tried it on Android yet → hacked it on the train ride to work.
I made this to simulate an image zoom function on double tap, as you can see on iOS when double tapping an image to zoom in/out at the corresponding tap position. Maybe not the nicest way but it works for me at the moment. Correct me please if you got a better solution!

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

$scope.getTouchposition = function(event){
var canvasPosition = getPosition(event.gesture.touches[0].target);

var tap = { x:0, y:0 };
        if(event.gesture.touches.length>0){
        tt = event.gesture.touches[0];
        tap.x = tt.clientX || tt.pageX || tt.screenX ||0;
        tap.y = tt.clientY || tt.pageY || tt.screenY ||0;  
        }
 tap.x = tap.x - canvasPosition.x;
 tap.y = tap.y - canvasPosition.y;

 return {x: tap.x, y: tap.y};
}

//this function gets called from the html template
var zoomed = true;
  $scope.zoomFunction = function(){
    if(zoomed){// toggle zoom in
      var tap = {x:0, y:0};
      var position = $scope.getTouchposition(event);
      $ionicScrollDelegate.zoomBy(1.8, true, position.x, position.y);
      zoomed = !zoomed;
      //console.log(ionic.tap.pointerCoord(event));

      console.log(position.x);
    }else{ // toggle zoom out
     $ionicScrollDelegate.zoomTo(1, true);
      zoomed = !zoomed;
    }    
  }

// HTML template

<img src="img/starwars.jpg" style="width: 100%; height:100%;" on-double-tap="zoomFunction()">
3 Likes

Very useful, thank you!!!

Hi all have you a idea for update this for ionic v3 ?