Simplest way to detect a pinch

Question

This is a WEB APP not a native app. Please no Objective-C NS commands.

So I need to detect 'pinch' events on iOS. Problem is every plugin or method I see for doing gestures or multi-touch events, is (usually) with jQuery and is a whole additional pluggin for every gesture under the sun. My application is huge, and I am very sensitive to deadwood in my code. All I need is to detect a pinch, and using something like jGesture is just way to bloated for my simple needs.

Additionally, I have a limited understanding of how to detect a pinch manually. I can get the position of both fingers, can't seem to get the mix right to detect this. Does anyone have a simple snippet that JUST detects pinch?

Answer 1

Think about what a pinch event is: two fingers on an element, moving toward or away from each other. Gesture events are, to my knowledge, a fairly new standard, so probably the safest way to go about this is to use touch events like so:

(ontouchstart event)

if (e.touches.length === 2) {     scaling = true;     pinchStart(e); } 

(ontouchmove event)

if (scaling) {     pinchMove(e); } 

(ontouchend event)

if (scaling) {     pinchEnd(e);     scaling = false; } 

To get the distance between the two fingers, use the hypot function:

var dist = Math.hypot(     e.touches[0].pageX - e.touches[1].pageX,     e.touches[0].pageY - e.touches[1].pageY); 

Answer 2

You want to use the gesturestart, gesturechange, and gestureend events. These get triggered any time 2 or more fingers touch the screen.

Depending on what you need to do with the pinch gesture, your approach will need to be adjusted. The scale multiplier can be examined to determine how dramatic the user's pinch gesture was. See Apple's TouchEvent documentation for details about how the scale property will behave.

node.addEventListener('gestureend', function(e) {     if (e.scale < 1.0) {         // User moved fingers closer together     } else if (e.scale > 1.0) {         // User moved fingers further apart     } }, false); 

You could also intercept the gesturechange event to detect a pinch as it happens if you need it to make your app feel more responsive.