javascript - 以HTML格式获取移动屏幕上溢出(放大)图像的可见部分(以坐标为单位)

我正在用HTML / javascript开发一个移动应用程序，用户可以在某个时候捏入(放大)图像以显示图像的特定部分。缩放的结果是图像的可见部分(众所周知)，而不是整个图像。我想获得当触摸事件触发时(当用户从​​捏捏中抬起手指时)可见的部分(用户具有放大的程度以及图像的哪个部分)。
我想到了各种方法，希望得到您的意见。

使用pageXOffset和pageYOffset(但是我找不到用户进行了多少缩放)

使用 Canvas 并手动处理捏合效果

拍摄放大的屏幕截图(如果可能)，并将其与原始图像进行比较，以找到可见的部分。

我用PhoneGap包装了应用程序，因此我能够编写本机代码，如果这样做有任何帮助的话...

最佳答案

zoom是2个手指的手势，因此您必须使用event.targetTouches.length == 2在touchmove上进行监听
然后从每个手指读取X和Y坐标

图像缩放中心将为event.targetTouches [0] .pageX-event.targetTouches 1 .pageX和event.targetTouches [0] .pageY-event.targetTouches 1 .pageY与您的滚动位置或图像位置有关(注意+或-)

并且您的比例因子应该是vectorLengthCurrent-vectorLengthStart

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

图片:

例:

图片:
左:-100px | startFinger [0] .pageX:50像素| currentFinger [0] .pageX:55px | startFinger 1 .pageX:150像素| currentFinger 1 .pageX:140像素

因此中心应为:startFinger 1 .pageX-startFinger [0] .pageX-左
(仅当startFinger 1 .pageX大于| Y的方式相同时)

vector 长度:
sqrt(x ^ 2 + y ^ 2);