3

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

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

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

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

4

1 回答 1

0

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: 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)；

于 2012-05-21T18:01:03.080 回答