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

Question

我正在用 HTML / javascript 制作一个移动应用程序，用户在某些时候可以捏合（放大）图像以显示图像的特定部分。由于缩放，图像只有可见部分（众所周知），而不是整个图像。当触摸事件触发时（当用户从​​捏合中抬起手指时），我想获得那个可见部分（用户放大了多少以及图像的哪个部分） .

我想了很多办法，想听听你的意见。

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

我正在使用 PhoneGap 封装应用程序，因此我可以编写本机代码，如果这有任何帮助的话...

Answer 1

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

图像缩放中心将是 event.targetTouches[0].pageX - event.targetTouches1.pageX 和 event.targetTouches[0].pageY - event.targetTouches1.pageY 与您的滚动位置或图片位置（注意+或-）

你的比例因子应该是vectorLengthCurrent-vectorLengthStart

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

图片：

示例：

图片： 左：-100px | startFinger[0].pageX: 50px | currentFinger[0].pageX: 55px | startFinger1.pageX: 150px | currentFinger1.pageX: 140px

所以中心应该是：startFinger1.pageX - startFinger[0].pageX - left （仅当 startFinger1.pageX 大于 | Y 时同理）

向量长度： sqrt(x^2 + y^2);