Html 适用于 android 和 iPad 的 jQuery 移动/JavaScript 图像捏合缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12826317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mobile/JavaScript image pinch zoom for android and iPad
提问by WhatsInAName
I have been searching for an uncomplicated solution to how an image (png) can be zoomed in and out without affecting the rest of the website, but found none.
我一直在寻找一个简单的解决方案来解决如何在不影响网站其余部分的情况下放大和缩小图像 (png)，但没有找到。
Have any of you used such a tool or know a way to do this using jQuery or javascript? I am very new to jQuery, so don't know what events I should look at. This functionality should work on both android tablets and iPad.
你们有没有人使用过这样的工具或知道一种使用 jQuery 或 javascript 来做到这一点的方法？我对 jQuery 很陌生，所以不知道我应该看什么事件。此功能应该适用于 Android 平板电脑和 iPad。
Looked at JQuery Mobile Pinch Zoom Image Onlyand the links provided but apparently those are for the ones using PhoneGap.
查看JQuery Mobile Pinch Zoom Image Only和提供的链接，但显然这些是针对使用 PhoneGap 的。
Thanks for any help.
谢谢你的帮助。
回答by rombdn
I did not find a solution either so I implemented it myself (using vanilla JS and canvas but portable to css3) : https://github.com/rombdn/img-touch-canvas
我也没有找到解决方案，所以我自己实现了它（使用 vanilla JS 和 canvas 但可移植到 css3）：https: //github.com/rombdn/img-touch-canvas
Example : http://www.rombdn.com/img-touch-canvas/demo(better with a touch device but works on desktop with +/- and mouse drag)
示例：http: //www.rombdn.com/img-touch-canvas/demo（使用触摸设备更好，但在桌面上使用 +/- 和鼠标拖动工作）
<html>
<body>
<div style="width: your_image_width; height: your_image_height">
<canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>
</div>
<script src="img-touch-canvas.js"></script>
<script>
var gesturableImg = new ImgTouchCanvas({
canvas: document.getElementById('mycanvas'),
path: "your image url"
});
</script>
</body>
</html>
回答by Jasper
I would place the image in a "viewport" layer that is used to maintain the flow of your page. The "viewport" element would have it's overflowCSS property set to hiddento achieve this goal.
我会将图像放置在用于维护页面流的“视口”层中。“viewport”元素会将其overflowCSS 属性设置hidden为实现此目标。
You can then use JavaScript to detect multiple touches and then scale the image as necessary. I have yet to use this frameworks but it seems very cool and could help make this easier on you: https://github.com/HotStudio/touchy
然后，您可以使用 JavaScript 检测多次触摸，然后根据需要缩放图像。我还没有使用过这个框架，但它看起来很酷，可以帮助你更轻松：https: //github.com/HotStudio/touchy
You can also detect multiple touches without a framework by watching the event.touchesarray inside an event handler for touchmove. For each touch occurring simultaneously there will be another index in the event.touchesarray.
您也可以通过观察检测多个触摸没有一个框架，event.touches用于在事件处理阵列touchmove。对于同时发生的每次触摸，event.touches数组中都会有另一个索引。
Using Touchyseems pretty easy (untested):
使用Touchy似乎很容易（未经测试）：
var handleTouchyPinch = function (e, $target, data) {
$target.css({'webkitTransform':'scale(' + data.scale + ',' + data.scale + ')'});
};
$('#my_div').bind('touchy-pinch', handleTouchyPinch);
