Get visible part (in coordinates) of overflown (zoomed in) image on a mobile screen, in HTML
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…
One Solution collect form web for “Get visible part (in coordinates) of overflown (zoomed in) image on a mobile screen, in HTML”
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.pageX – event.targetTouches1.pageX and event.targetTouches.pageY – event.targetTouches1.pageY in relationship with your scrollposition or image position (attention to + or -)
and your scalefactor should be vectorLengthCurrent-vectorLengthStart
left: -100px | startFinger.pageX: 50px | currentFinger.pageX: 55px | startFinger1.pageX: 150px | currentFinger1.pageX: 140px
so the centre should be: startFinger1.pageX – startFinger.pageX – left
(only if startFinger1.pageX is greater | Y in the same way)
sqrt(x^2 + y^2);