pinch zoom in, zoom out - JavascriptjQueryjQuery mobile events for web on Android platform? - Stack Overflow

admin管理员组

文章数量:1254577

What are the Javascript or jQuery or jQuery mobile events involved in pinch zoom in and zoom out? I am trying to capture those events to zoom in and zoom out of an image which is inside a div without affecting the entire layout of the website. Simplest way to detect a pinch works for iPad but not android.

What are the equivalent way to detect the same on Android platform for web?

Any help is appreciated.

EDIT: I have been trying touchy.js and that works for doing zoom-in and zoom-out for images but, zooming into an image is not useful if part of the image is not accessible by finger swipe or something of that sort.

For example, consider the following code:

    <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>

I need the image to stay inside the div and the user should be able to move around the image after they zoom in. But with this code, I have to swipe my finger on the empty region (created by the paragraph tag) in order to go to different part of the image horizontally. Same happens vertically (you'll have to swipe your finger on an empty space on the web page in order to see the image length wise). What I am trying to say is, swiping motion inside the image does not have any effect while the users will expect to do that after zooming into the image.

It's very hard to explain without an example and I tried creating / but it does not work as I would like it to since I cannot edit the meta in head. I needed to add:

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

so that the entire webpage is not zoomable.

What are the Javascript or jQuery or jQuery mobile events involved in pinch zoom in and zoom out? I am trying to capture those events to zoom in and zoom out of an image which is inside a div without affecting the entire layout of the website. Simplest way to detect a pinch works for iPad but not android.

What are the equivalent way to detect the same on Android platform for web?

Any help is appreciated.

EDIT: I have been trying touchy.js and that works for doing zoom-in and zoom-out for images but, zooming into an image is not useful if part of the image is not accessible by finger swipe or something of that sort.

For example, consider the following code:

    <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>

I need the image to stay inside the div and the user should be able to move around the image after they zoom in. But with this code, I have to swipe my finger on the empty region (created by the paragraph tag) in order to go to different part of the image horizontally. Same happens vertically (you'll have to swipe your finger on an empty space on the web page in order to see the image length wise). What I am trying to say is, swiping motion inside the image does not have any effect while the users will expect to do that after zooming into the image.

It's very hard to explain without an example and I tried creating http://jsfiddle/Debarupa/8peaf/ but it does not work as I would like it to since I cannot edit the meta in head. I needed to add:

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

so that the entire webpage is not zoomable.

• javascript
• android
• jquery-mobile
• dom-events

Share Improve this question Follow edited Jul 17, 2019 at 11:26 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Oct 15, 2012 at 17:30 WhatsInANameWhatsInAName 72422 gold badges1414 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You can calculate your own scale by monitoring the user's gesture and tracking the points of contact of their fingers.

Something like:

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
});

But, if you want to use something pre-made, then I suggest checking-out Touchy: https://github./HotStudio/touchy

本文标签：