How to find the pinch direction in javascript?

Question

In my web app i have an div which will change the height and width based on the pinching direction. for example if user pinch horizontally it will change width, for vertical pinch it will change the height.

I am using the gesture events

var scaleMe = $("#scaleMe");  
scaleMe[0].ongesturestart = function (e) {
    height = scaleMe .height();
}

scaleMe[0].ongesturechange = function (e) {
    e.preventDefault();                 
    var scaleheight = (scaleMe.height() * e.scale); 
    scaleMe.height(Math.min(Math.max(scaleheight, 50), 400));
}

Is there any way to find the pinch direction ?

Answer 1

If i understood correctly..

on "guesturestart" you should save pinch coordinates of one of gestures (or you can save all for better precision)

var allTouches = event.originalEvent.touches;

var prevTouchX = allTouches[0].pageX;

var prevTouchY = allTouches[0].pageY;

then, on "guesturechange" you have to calculate, in what axis movement was longer

var allTouches = event.originalEvent.touches;

var touchX = allTouches[0].pageX;

var touchY = allTouches[0].pageY;

var propertyToChange = null;

if (Math.abs(touchX - prevTouchX) > Math.abs(touchY - prevTouchY)) >{

propertyToChange = 'width';

} else {

propertyToChange = 'height';

}

Hope it was useful.