Question

I’m making a mobile application in HTML / javascript where the user at some point can pinch-in (zoom in) at an image to show a specific part of the image. As a result of the zoom there is only a visible part of the image (as we all know), and not the image as a whole. I want to get that visible part (how much the user has zoome-in and in what part of the image), when the touch-up event fires (when the user has lifted his fingers from pinching).

I’ve thought of various ways and I want your opinion.

• Use pageXOffset and pageYOffset (but I can’t find how much zoom the user has done)
• Use a canvas and manually handle the pinch effect
• Take a screenshot (if possible) of the zoomed-in and compare it to the original, in order to find the visible part.

I’m wrapping the application with PhoneGap, so I am able to write native code, if that helps in any way…

Answer 1

zoom is a gesture with 2 fingers so you have to listen on touchmove with event.targetTouches.length == 2
and then read the X and Y coordinates from each finger

the image zoom centre will be event.targetTouches[0].pageX – event.targetTouches1.pageX and event.targetTouches[0].pageY – event.targetTouches1.pageY in relationship with your scrollposition or image position (attention to + or -)

and your scalefactor should be vectorLengthCurrent-vectorLengthStart

see at http://www.html5rocks.com/en/mobile/touch/

image:

example:

image:
left: -100px | startFinger[0].pageX: 50px | currentFinger[0].pageX: 55px | startFinger1.pageX: 150px | currentFinger1.pageX: 140px

so the centre should be: startFinger1.pageX – startFinger[0].pageX – left
(only if startFinger1.pageX is greater | Y in the same way)

vector length:
sqrt(x^2 + y^2);