javascript - 手势和触摸事件 - 平滑地调整正方形的大小

Question

我的 iOS 设备上的视口(viewport)中有一个蓝色的 #square 垂直和水平居中……

<div id="square"></div>
#square {
    width:100px;
    height:100px;
    background:blue;
    margin:0 auto;
}

我想在我的手机上做捏/缩放手势时在最小值和最大值内调整它的大小。

现在，这就是我为此使用的所有 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;
    }


});

但是，整个重新压缩的体验感觉有点断断续续，并且对我的手指 react 不是很顺畅。它确实有效，但不如我希望的那样顺利。

首先。我真的不明白javascript“触摸”事件和javascript“手势”事件之间的区别。我需要更多的 eventListeners 吗？像 gestureStart 和 gestureEnd 这样可以工作吗？

我现在遇到的问题是，当我放大 #square 时，它会非常快地跳到它的最大值 (300)，但我无法用手指准确地控制它的大小.一旦调整大小时，我在做缩小手势时也很难再次减小尺寸。

我将我当前的代码放在 jsfiddle 上，这样您就可以自己测试它。 http://jsfiddle.net/Ec3az/

也许有人可以帮我解决这个问题，因为我很想完成这篇文章。在智能手机上放大和缩小时，总体结果应该只是一个非常流畅的体验和对正方形大小的实际控制。

提前致谢

编辑:顺便说一句。我愿意只使用标准触摸事件而不使用额外的库。

Answer 1

您遇到的问题是，当您收到新的手势更改事件时，您正在缩放正方形的当前宽度，而实际上您想要缩放正方形的原始宽度和高度。按照您的方式进行操作会累积每个比例变化，并导致正方形的大小迅速增加，这就是您所经历的。

缩放完成后，我们还需要将原始宽度更新为当前宽度，以便下次用户缩放时，它会从正确的尺寸开始缩放。

所以这创造了更流畅的体验，因为它总是缩放原始宽度:

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

这个 fiddle 在 iPad 1、iOS 5.1 上似乎很流畅。什么东西! :)

http://jsfiddle.net/D9NC3/

此外，关于手势和触摸事件，我在许多浏览器中都支持触摸事件(android、iOS safari 和 Firefox 似乎 http://caniuse.com/#search=touch)，但据我所知手势事件是专有的到 iOS Safari 。它们基本上可以帮助您处理 iOS 类型的手势(捏合和缩放、旋转等)，因此您不必自己实现手势检查。

希望对您有所帮助!