捏放大，缩小 - Android 平台上的 Web 的 Javascript/jQuery/jQuery 移动事件？

Question

在捏放大和缩小中涉及的 Javascript 或 jQuery 或 jQuery 移动事件是什么？我正在尝试捕获这些事件以放大和缩小 div 内的图像，而不会影响网站的整个布局。 Simplest way to detect a pinch 适用于 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/，但它不能像我希望的那样工作，因为我无法编辑头部的元数据。我需要补充：

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

使整个网页不可缩放。

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