捏缩放,缩小 - 在Android平台上的网页上的javascript/jquery/jquery移动事件？

Question

捏缩放和缩小涉及哪些javascript或jquery或jquery移动事件？我试图捕获这些事件来放大和缩小div内部的图像而不影响网站的整个布局.检测捏的最简单方法适用于iPad但不适用于Android.

在android平台上为web检测相同的方法是什么？

任何帮助表示赞赏.

编辑:我一直在尝试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