CODEWITHSUNDEEP
javascriptjquerytouch
BalaKrishnan웃
BalaKrishnan웃

Reputation: 4557

How to find the pinch direction in javascript?

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 ?

Upvotes: 5

Views: 511

Answers (1)

bonbonez
bonbonez

Reputation: 6848

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.

Upvotes: 1

Related Questions