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

Question

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

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


});

然而,整个戒烟体验感觉有点波涛汹涌,并没有真正顺利地回应我的手指.它确实有效,但并不像我希望的那样顺利.

首先.我真的没有区分javascript"touch"-event和javascript"gesture"-event.我在这里需要更多的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'));
}

​

在iPad 1,iOS 5.1上,这个小提琴似乎很流畅!:)

http://jsfiddle.net/D9NC3/

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

希望能帮助到你!