javascript 手势和触摸事件 - 平滑地调整正方形的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10821258/
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
Gesture and touch events - smoothly resize a square
提问by matt
I have a blue #squarevertically and horizontally centered in my viewport on my iOS device …
#square我的 iOS 设备的视口中有一个垂直和水平居中的蓝色…
<div id="square"></div>
#square {
width:100px;
height:100px;
background:blue;
margin:0 auto;
}
I'd like to resize it within a min and max value when doing a pinch/zoom gesture on my phone.
在我的手机上进行捏合/缩放手势时，我想在最小值和最大值内调整它的大小。
Right now, this is all the javascript I'm using for it.
现在，这就是我为它使用的所有 javascript。
$(document).ready(function() {
var dom = document.body,
_width = parseInt($('#square').css('width')),
vel = 3,
min = _width,
max = 300,
scale;
dom.addEventListener("gesturechange", gestureChange, false);
function gestureChange(e) {
e.preventDefault();
scale = e.scale;
_width = Math.round(_width*(scale/vel));
if ( _width <= max && _width >= min )
$('#square').css({
'width' : _width + 'px',
'height' : _width + 'px'
});
if ( _width > max ) _width = max;
if ( _width < min ) _width = min;
}
});
However, the entire reszining experience feels kind of choppy and doesn't really smoothly respond to my fingers. It does work, but not as smoothly as I want it to be.
然而，整个重新调整的体验感觉有点不稳定，并且对我的手指没有真正的平滑反应。它确实有效，但没有我想要的那么顺利。
First off. I don't really get the difference between a javascript "touch"-event and a javascript "gesture"-event. Do I need more eventListeners here? Like gestureStartand gestureEndfor this to work?
首先。我真的不明白 javascript“触摸”事件和 javascript“手势”事件之间的区别。我需要更多的事件监听器吗？喜欢gestureStart并gestureEnd为此工作？
The problems I have right now is that when I zoom in the #squarejumps to its max-value (300) really fast, but I can't really control its size exactly with my fingers. And when once resized I have also trouble decreasing the size again when doing a zoom-out gesture.
我现在遇到的问题是，当我#square非常快地将跳转放大到最大值 (300) 时，但我无法真正用手指准确控制其大小。一旦调整大小，我也无法在执行缩小手势时再次减小大小。
I put my current code on jsfiddle so you might be able to test it yourself. http://jsfiddle.net/Ec3az/
我把我当前的代码放在 jsfiddle 上，这样你就可以自己测试了。http://jsfiddle.net/Ec3az/
Maybe someone can help me out here as I'd love to finish this piece. The overall outcome should simply be a really smooth experience and actual control over the size of the square when zooming in and zooming out on a Smartphone.
也许有人可以在这里帮助我，因为我很想完成这件作品。总体结果应该只是在智能手机上放大和缩小时真正流畅的体验和对正方形大小的实际控制。
Thank you in advance
先感谢您
edit: btw. I'd love to use only standard touch events and not use an additional library.
编辑：顺便说一句。我想只使用标准的触摸事件而不使用额外的库。
回答by Andy
The problem you were having is that when you get a new gesture change event, you were scaling the current width of the square, when really you wanted to scale the original width and height of the square. Doing it your way accumulates each change in scale and causes a very quick increase in the size of the square, which is what you were experiencing.
您遇到的问题是，当您获得新的手势更改事件时，您正在缩放正方形的当前宽度，而实际上您想要缩放正方形的原始宽度和高度。按照您的方式进行操作会累积每次缩放比例的变化，并导致正方形的大小迅速增加，这正是您所经历的。
After the zoom has finished, we also need to update the original width to the current width, so next time the user zooms, it'll scale from the correct size.
缩放完成后，我们还需要将原始宽度更新为当前宽度，以便下次用户缩放时，它会从正确的大小开始缩放。
So this creates a smoother experience as it's always scaling the original width:
因此，这会创建更流畅的体验，因为它始终缩放原始宽度：
var dom = document.body,
_width = parseInt($('#square').css('width')),
vel = 5.0,
min = _width,
max = 300,
scale;
dom.addEventListener("gesturechange", gestureChange, false);
dom.addEventListener("gestureend", gestureEnd, false);
function gestureChange(e) {
e.preventDefault();
scale = e.scale;
var tempWidth = _width * scale;
if (tempWidth > max) tempWidth = max;
if (tempWidth < min) tempWidth = min;
$('#square').css({
'width': tempWidth + 'px',
'height': tempWidth + 'px'
});
}
function gestureEnd(e) {
e.preventDefault();
_width = parseInt($('#square').css('width'));
}
?
?
This fiddle seems to be smooth on the iPad 1, iOS 5.1.something! :)
这个小提琴在 iPad 1、iOS 5.1.something 上似乎很流畅！:)
Also, with regards to the gesture and touch events, I the touch events are supported in a number of browsers (android, iOS safari and Firefox it seems http://caniuse.com/#search=touch), but the gesture events as far as I know are proprietary to iOS safari. They are essentially there to help you with handling iOS type gestures (pinch and zoom, rotate etc), so you don't have to implement gesture checking yourself.
此外，关于手势和触摸事件，许多浏览器（android、iOS safari 和 Firefox 似乎http://caniuse.com/#search=touch）都支持触摸事件，但手势事件为据我所知是 iOS Safari 专有的。它们本质上是为了帮助您处理 iOS 类型的手势（捏合和缩放、旋转等），因此您不必自己实施手势检查。
Hope it helps!
希望能帮助到你！
