捏放大，缩小-Android平台上用于Web的Javascript/jQuery/jQuery移动事件? [英] pinch zoom in, zoom out - Javascript/jQuery/jQuery mobile events for web on Android platform?
问题描述
捏放大和缩小涉及哪些Javascript或jQuery或jQuery移动事件?我正在尝试捕获这些事件以放大和缩小div内的图像，而不影响网站的整体布局. 检测捏的最简单方法适用于iPad，但不适用于android.
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.
在用于Web的Android平台上检测到相同内容的等效方法是什么?
What are the equivalent way to detect the same on Android platform for web?
感谢您的帮助.
编辑:我一直在尝试 touchy.js ，它可以正常工作用于进行图像的放大和缩小，但是如果无法通过手指滑动或类似方式访问图像的一部分，则放大图像是没有用的.
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.
例如，考虑以下代码:
<div style=" border: 1px solid blue; width: 560px; overflow:scroll;">
<p> </p>
<img id="image" src="images/tux.png" alt="my image" style=" border: 1em solid gray;" />
</div>
我需要将图像保留在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.
没有示例就很难解释，我尝试创建 http://jsfiddle.net/Debarupa/8peaf/，但由于我无法编辑元数据，因此无法正常运行.我需要添加:
It's very hard to explain without an example and I tried creating http://jsfiddle.net/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.
推荐答案
您可以通过监视用户的手势并跟踪其手指的接触点来计算自己的比例.
You can calculate your own scale by monitoring the user's gesture and tracking the points of contact of their fingers.
类似的东西:
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
But, if you want to use something pre-made, then I suggest checking-out Touchy: https://github.com/HotStudio/touchy
这篇关于捏放大，缩小-Android平台上用于Web的Javascript/jQuery/jQuery移动事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
