19

いくつかのタッチ イベントとジェスチャに取り組んでいます。オブジェクトをズームおよび回転できるようにしたいのですが、ドラッグ可能にできましたが、ジェスチャで問題が発生しています。ジェスチャーは機能していますが、ピンチしてズームインまたはズームアウトしたり、回転させようとすると、指から指へとジャンプします。

参照用の私のコードは次のとおりです。

var width = 300; var height = 300; var rotation = 0;
$('.dynamic').live("gesturechange gestureend", function(e){
var orig = e.originalEvent;

if(e.type == 'gesturechange'){
    e.preventDefault();
    $(this).css("width", parseFloat(width) * orig.scale);
    $(this).css("height", parseFloat(height) * orig.scale);
    $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)");
}else if(e.type == 'gestureend'){
    a.w[ids] = parseFloat(width) * orig.scale;
    a.h[ids] = parseFloat(height) * orig.scale;
    a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360;
}
});

とにかくこれをスムーズにして、指からジャンプしないようにする方法はありますか、それとも私が取ったアプローチが間違っていますか? いくつかのヒントとコツとヘルプが必要な場合

解決策を見つけた

ドラッグのタッチ イベントがジェスチャに干渉したようです。そのため、指から指へとジャンプし続けました。これを回避するには、ジェスチャを使用せずに、オブジェクトのタッチをカウントし、代わりにタッチの開始、終了、および変更を使用しました。

ここにコードがあります

var touches = 0; var width = 300; var height = 300; var rotation = 0;
$('.dynamic').live("touchstart touchmove touchend", function(e){
var orig = e.originalEvent;   

if(e.type == 'touchstart'){
 if(orig.touches.length == 1){
    touches = 1; 
 }else if(orig.touches.length == 2){
    touches = 2;
 }
}else if(e.type == 'touchmove'){
 e.preventDefault();
 if(touches == 2){
        $(this).css("width", parseFloat(width) * orig.scale);
        $(this).css("height", parseFloat(height) * orig.scale);
        $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)");
 }
}else if(e.type == 'touchend'){
    if(touches == 2){
        a.w[ids] = parseFloat(width) * orig.scale;
        a.h[ids] = parseFloat(height) * orig.scale;
        a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360;
    }
}
});
4

2 に答える 2

10

ソリューションは機能しますが、最も洗練されたものではありません。最初のコードを使用して、gestureイベントに依存することができます。
あなたがしなければならないことは、イベント ハンドラーが自分のtouchイベント ハンドラーに干渉しないことを確認することだけgestureです。これをイベント ハンドラ
に追加するだけです。touch

$('.dynamic').live("touchstart touchmove touchend", function(e){
    if(e.originalEvent.touches.length > 1)
        return;
    /* your touch code here */
});

次に、既存のジェスチャー コードを使用します。

$('.dynamic').live("gesturechange gestureend", function(e){
     /* your gesture code here */
});

ジェスチャ イベントは 2 本以上の指が画面に触れている場合にのみトリガーされ、これが発生したときに他のコードは実行されないため、これは機能するはずです。これは、タッチ イベント ハンドラーが 1 回のタッチにのみ応答するためです。

于 2011-09-17T18:16:54.267 に答える