JavaScript/jQuery/jQuery Mobile事件在Android平台上用于网页的捏合缩放，放大和缩小？

Question

有哪些与JavaScript、jQuery或jQuery移动相关的事件可以用于捕获缩放手势？我正在尝试捕获这些事件以对一个位于div内的图像进行缩放，而不影响整个网站的布局。检测缩放手势最简单的方法适用于iPad但不适用于Android。

在Android平台上，有哪些等效的方法可以检测相同的缩放手势？

任何帮助都将不胜感激。

编辑：我一直在尝试使用touchy.js来进行图像的缩放，但是如果图像的某一部分无法通过手指滑动或类似的方式访问，则放大图像没有用处。

例如，请考虑以下代码：

    <div style=" border: 1px solid blue; width: 560px; overflow:scroll;">
      <p>&nbsp;</p>
      <img id="image" src="images/tux.png" alt="my image" style=" border: 1em solid gray;" />
    </div>

我需要图片保持在div中，用户可以在缩放后移动图片。但是使用这段代码时，我必须在空白区域（由段落标记创建）上滑动手指才能水平移动到图像的不同部分。垂直方向也是如此（您必须在网页上的空白空间上滑动手指才能纵向查看图像）。我的意思是，在图像内部滑动手势没有任何效果，而用户希望在缩放图像后能够这样做。

没有示例很难解释，我尝试创建了http://jsfiddle.net/Debarupa/8peaf/，但它不能按照我想要的方式工作，因为我无法编辑head中的meta。我需要添加：

     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1" />

以便整个网页不可缩放。

- WhatsInAName

Answer 1

您可以通过监控用户的手势和跟踪他们手指的接触点来计算自己的比例尺。

例如：

var tracks = [];
$myElement.on("touchmove", function (event) {

    //only run code if the user has two fingers touching
    if (event.originalEvent.touches.length === 2) {

        //track the touches, I'm setting each touch as an array inside the tracks array
        //each touch array contains an X and Y coordinate
        tracks.push([ [event.originalEvent.touches[0].pageX, event.originalEvent.touches[0].pageY], [event.originalEvent.touches[1].pageX, event.originalEvent.touches[1].pageY] ]);
    }
}).on("touchstart", function () {
    //start-over
    tracks = [];
}).on("touchend", function () {
    //now you can decide the scale that the user chose
    //take the track points that are the closest and determine the difference between them and the points that are the farthest away from each other
});

但是，如果你想使用一些预制的东西，我建议检查一下Touchy：https://github.com/HotStudio/touchy

- Jasper

---

谢谢您的快速回复。我有机会时会尝试这个方法。 - WhatsInAName

我选择使用touchy（并回想起之前使用它时出现了一些问题，所以这次尝试自己去做）。问题是，虽然可以很好地放大和缩小，但一旦您放大图像，就无法通过滑动来移动图像。这是示例（http://jsfiddle.net/Debarupa/8peaf/），但不能弄清楚如何在jsfiddle中编辑head中的viewport meta应该有user-scalable=no，以防止整个页面的缩放。 - WhatsInAName

我正在尝试这个，但是我将在每次触摸移动时计算比例（但限制速度），以使其感觉更加灵敏。 - Alex K

我想指出的是，你使用数组嵌套数组的方式非常难以处理。对我来说，更有意义的方法是推送包含touch_1和touch_2的对象，并在这些对象内部包含x和y。请参考我的示例：http://pastebin.com/tZaeMpL4 - Alex K

在触控笔记本电脑上，我如何检测Firefox和IE浏览器中的多点触控？对于Chrome浏览器，这个解决方案是有效的... - John R