pinch phóng to, thu nhỏ - sự kiện di động javascript/jquery/jquery cho web trên nền tảng Android?

Question

Sự kiện di động javascript hoặc jquery hoặc jquery có liên quan đến việc phóng to và thu nhỏ bằng pinch là gì? Tôi đang cố gắng nắm bắt những sự kiện đó để phóng to và thu nhỏ hình ảnh bên trong một div mà không ảnh hưởng đến toàn bộ bố cục của trang web. Simplest way to detect a pinch hoạt động cho iPad nhưng không hoạt động trên Android.

Cách tương tự để phát hiện tương tự trên nền tảng Android dành cho web là gì?

Mọi trợ giúp đều được đánh giá cao.

EDIT: Tôi đã cố gắng touchy.js và làm việc để làm zoom-in và zoom-out cho hình ảnh nhưng, phóng to vào một hình ảnh không phải là hữu ích nếu một phần của hình ảnh không thể truy cập bởi thao tác vuốt ngón tay hoặc một cái gì đó của loại đó.

Ví dụ, hãy xem xét đoạn mã sau:.

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

tôi cần những hình ảnh để ở lại bên trong div và người dùng sẽ có thể di chuyển xung quanh hình ảnh sau khi phóng to Nhưng với mã này, tôi phải vuốt ngón tay của tôi trên vùng trống (được tạo bởi thẻ đoạn) để đi đến phần khác của hình ảnh theo chiều ngang. Tương tự xảy ra theo chiều dọc (bạn sẽ phải trượt ngón tay của bạn trên một không gian trống trên trang web để xem chiều dài hình ảnh khôn ngoan). Những gì tôi đang cố gắng nói là, chuyển động bên trong hình ảnh không có bất kỳ ảnh hưởng nào trong khi người dùng sẽ mong đợi làm điều đó sau khi phóng to hình ảnh.

Rất khó giải thích mà không có ví dụ và tôi đã thử tạo http://jsfiddle.net/Debarupa/8peaf/ nhưng nó không hoạt động như tôi muốn vì tôi không thể chỉnh sửa meta trong phần đầu. Tôi cần phải thêm:

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

để toàn bộ trang web không thể thu phóng.

Answer 1

Bạn có thể tính toán tỷ lệ của riêng mình bằng cách theo dõi cử chỉ của người dùng và theo dõi các điểm tiếp xúc của ngón tay.

Cái gì như:

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

Tuy nhiên, nếu bạn muốn sử dụng một cái gì đó trước khi thực hiện, sau đó tôi đề nghị kiểm tra-out Nhạy cảm: https://github.com/HotStudio/touchy