Touch coordinates? (touchmove)

ionic-v1
1

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?

2

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

3

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
4

Very useful, thank you!!!

5

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