3

#squareiOS デバイスのビューポートの垂直方向と水平方向の中心に 青が表示されています…</p>

<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の「タッチ」イベントとJavaScriptの「ジェスチャー」イベントの違いがよくわかりません。ここでさらに eventListeners が必要ですか? 好きgestureStartでgestureEnd、これが機能するために？

私が現在抱えている問題は、#squareジャンプを最大値 (300) にズームインすると非常に高速ですが、指でサイズを正確に制御できないことです。また、一度サイズを変更すると、ズームアウト ジェスチャを行うときに再度サイズを小さくするのにも苦労します。

現在のコードを jsfiddle に置いたので、自分でテストできるかもしれません。http://jsfiddle.net/Ec3az/

この作品を完成させたいので、誰かがここで私を助けてくれるかもしれません。全体的な結果は、スマートフォンでズームインおよびズームアウトするときに、非常にスムーズなエクスペリエンスと正方形のサイズを実際に制御することです.

前もって感謝します

編集：ところで。標準のタッチ イベントのみを使用し、追加のライブラリは使用しないでください。

4

1 に答える 1

7

あなたが抱えていた問題は、新しいジェスチャー変更イベントを取得したときに、正方形の元の幅と高さを実際にスケーリングしたいときに、現在の正方形の幅をスケーリングしていたことです。あなたのやり方でそれを行うと、スケールの各変更が蓄積され、正方形のサイズが非常に急速に増加します。これは、あなたが経験していたことです.

ズームが終了したら、元の幅を現在の幅に更新する必要もあります。これにより、次にユーザーがズームしたときに、正しいサイズからスケーリングされます。

したがって、これは常に元の幅をスケーリングするため、よりスムーズなエクスペリエンスを作成します。

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

</p>

このフィドルは、iPad 1、iOS 5.1 でスムーズに動作するようです。:)

http://jsfiddle.net/D9NC3/

また、ジェスチャーとタッチ イベントに関しては、タッチ イベントは多くのブラウザー (アンドロイド、iOS サファリ、Firefox のようですhttp://caniuse.com/#search=touch ) でサポートされていますが、ジェスチャー イベントは私の知る限り、iOS Safari 独自のものです。これらは基本的に、iOS タイプのジェスチャ (ピンチとズーム、回転など) の処理を​​支援するために存在するため、ジェスチャ チェックを自分で実装する必要はありません。

それが役に立てば幸い！

于 2012-05-31T08:28:22.173 に答える