Geek asks and answers

Get the visible part (in coordinates) of the image with overflow (enlarged image) on the mobile screen, in HTML format

I am making a mobile application in HTML / javascript where a user at some point can pinch (enlarge) an image to show a specific part of the image. As a result of the increase, there is only the visible part of the image (as we all know), and not the image as a whole. I want to get this visible part (as far as the user has zombies and in which part of the image) when the touch event is triggered (when the user lifted his fingers from pinching).

I thought of different ways, and I want your opinion.

  • Use pageXOffset and pageYOffset (but I cannot determine how much the user has done this)
  • Use canvas and manually process the pinch effect
  • Take a screenshot (if possible) of the enlarged image and compare it with the original to find the visible part.

I am wrapping a PhoneGap application so I can write my own code if that helps ...

+3
source share
1 answer

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

the center of image scaling will be event.targetTouches [0] .pageX - event.targetTouches 1 .pageX and event.targetTouches [0] .pageY - event.targetTouches 1 .pageY depending on your scroll position or image (attention to + or -)

scalefactor vectorLengthCurrent-vectorLengthStart

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

image: overview

:

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

: startFinger 1.pageX - startFinger [0].pageX - left ( startFinger 1.pageX | Y )

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

0

More articles:


All Articles