在移动屏幕上获取可移动屏幕上的可见部分（放大图像），在HTML中

Question

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

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

• 使用pageXOffset和pageYOffset（但我找不到多少缩放用户已完成）
• 使用帆布和手动处理的收缩效应
• 截屏（如果可能）的放大并将其与原始图像进行比较，以找到可见部分。

我包裹与PhoneGap的应用程序，所以我能写本地代码，如果以任何方式帮助...

Answer 1

变焦与2个手指的手势，所以你要听上与event.targetTouches.length == 2 touchmove然后读取X和从每个手指

图像变焦中心将event.targetTouches [0] .pageX Y坐标 - event.targetTouches 1 .pageX和事件。 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 - 左 （仅当startFinger 1 .pageX大于| Y以相同的方式）

矢量长度： sqrt（x^2 + y^2）;