以HTML格式在移动屏幕上获取溢出（放大）图像的可见部分（坐标）

Question

我正在使用HTML / javascript制作移动应用程序，用户可以在某个位置捏合（放大）图像以显示图像的特定部分。作为缩放的结果，只有图像的可见部分（我们都知道），而不是整个图像。当触摸事件触发时（当用户抬起手指时），我希望获得可见部分（用户有多少缩放以及图像的哪个部分） 。

我想到了各种各样的方式，我想要你的意见。

• 使用pageXOffset和pageYOffset（但我找不到用户做了多少缩放）
• 使用画布并手动处理捏合效果
• 获取放大的屏幕截图（如果可能）并将其与原始照片进行比较，以便找到可见部分。

我正在使用PhoneGap包装应用程序，所以我能够编写本机代码，如果这有任何帮助......

Answer 1

缩放是一个有两根手指的手势，所以你必须用touch.targetTouches.length == 2听touchmove 然后从每个手指读取X和Y坐标

图片缩放中心将是event.targetTouches [0] .pageX - event.targetTouches 1。pageX和event.targetTouches [0] .pageY - event.targetTouches 1。pageY in relation使用您的滚动位置或图像位置（注意+或 - ）

并且你的scalefactor应该是vectorLengthCurrent-vectorLengthStart

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

图片：

示例：

图像： 左：-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）;