Touch-coordinates relative to target object

ionic-v1
1

Hi there!
I’ve read this post Touch coordinates? (touchmove)
but I still can’t figure out how to get the right coordinates for my element.

I need to build a drawing canvas in the mobile app and for this I need the touch event and the location of the (x,y) of the touch…
I’ve managed to get coordinates using the “touches” object in the event, however, I see there is an offset in the coordinates I get.
Actually, these are the coordinates of the screen and not relative to the target element…
Am I loosing something here ?
any help is much appreciated
thanks for the great tool!

2

OK I found a solution to this…

I used the following function

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 };
}

(found at http://www.kirupa.com/html5/get_element_position_using_javascript.htm)

and then got the actual canvas position with the following:

var canvasPosition = getPosition(ev.gesture.touches[0].target);

var tap = { x:0, y:0 };
        if(ev.gesture.touches.length>0){
        tt = ev.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;

these seem to be the right coordinates…

I still, however, didn’t manage to find the way to use $ionicPosition

3

How were u able to figure this. I am adding a touch event where an icon is placed in the position you touched but it is always offsetted.

4

i’m a noob, can you please explain me how to add this code in my app. Thank you.