0

Androidでは、Sencha、JQTouch、JQMobileなどのフレームワークを使用せずに、jQuery（通常のjQuery）を使用して、キャンセル/バックスワイプ（左から右にスワイプ）を検出したいと思います。これまでに何かを達成しましたが、別の種類のジェスチャではなく、左から右へのスワイプイベントをキャプチャするように、jQueryに実装する数式を決定しようとしています。何を指示してるんですか？ある種の許容可能な差異が必要だと思います。ここで再適用できるある種の微積分式があると思いますが、残念ながら私は大学で微積分を避けました。だから、うまくいけば、あなたの答えは私を教育するでしょう。

試してみるx、yの開始/終了データのサンプルを次に示します。

（a）左中央から右上に斜めにスワイプします（この場合、望ましくないジェスチャ）

21,269-278,85

（b）左中央から右下に斜めにスワイプします（この場合、望ましくないジェスチャ）

13,269-331,436

（c）左中央から右中央にまっすぐ（一種）スワイプする（望ましいジェスチャー）

34,267-326,266

また

36,494-355,479

var gnStartX = 0;
var gnStartY = 0;
var gnEndX = 0;
var gnEndY = 0;

window.addEventListener('touchstart',function(event) {
  gnStartX = event.touches[0].pageX;
  gnStartY = event.touches[0].pageY;
},false);

window.addEventListener('touchmove',function(event) {
  gnEndX = event.touches[0].pageX;
  gnEndY = event.touches[0].pageY;
},false);

window.addEventListener('touchend',function(event) {
  alert('START (' + gnStartX + ', ' + gnStartY + ')   END (' + gnEndX + ', ' + gnEndY + ')');
},false);
4

2 に答える 2

0

試行錯誤の結果、これがいかに簡単で、微積分は必要ないかがわかりました。ミリ秒単位の時間はかなり速くなければならないので、350ms以下です。Y分散は+40または-40である必要があります。距離は240ピクセルである必要があります。

ただし、デバイスに依存しないピクセルに関して、コードでこのMETAタグを使用していることに注意してください。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

そして、私が戻る/キャンセルスワイプイベントを処理する方法：

var gnStartX = 0;
var gnStartY = 0;
var gnStartTime = 0;
var gnEndX = 0;
var gnEndY = 0;
var gnEndTime = 0;

window.addEventListener('touchstart',function(event) {
  gnStartX = event.touches[0].pageX;
  gnStartY = event.touches[0].pageY;
  gnStartTime = Number(new Date());
},false);

window.addEventListener('touchmove',function(event) {
  gnEndX = event.touches[0].pageX;
  gnEndY = event.touches[0].pageY;
  gnEndTime = Number(new Date());
},false);

window.addEventListener('touchend',function(event) {
  var nDiffTime = gnEndTime - gnStartTime;
  var nDiffX = gnEndX - gnStartX;
  var nDiffY = gnEndY - gnStartY;
  // is this a swipe back/cancel event?
  if ((nDiffTime <= 350) && (nDiffX >= 240) && (nDiffY >= -40) && (nDiffY <= 40)) {
    event.preventDefault();
    goBack();
  }
},false);

これを使用して独自のgoBack（）関数を実装する必要があります。

于 2011-01-17T03:41:58.487 に答える
0

スワイプ意図のおそらく良い指標は、スワイプラインの傾きである可能性があります。

var nDiffX = gnEndX - gnStartX;
var nDiffY = gnEndY - gnStartY;
var nSlope = nDiffY / Math.max(0.001,nDiffX);

if ((nDiffTime <= 350) && (Math.abs(nDiffX) >= 240)) {
  event.preventDefault();
  if ((nSlope > -0.125)&&(nSlope < 0.125)) {
    // Between lines of 1/8 and -1/8 slope - close enough to straight horizontal
    if (nDiffX > 0) {
      // Swiped to the right
    } else {
      // Swiped to the left
    }
  }
  goBack();
}

同様に、傾斜が右上または左下のスワイプの場合は1に近く、左上または右下の場合は-1に近いかどうかを確認できます。

于 2013-04-03T16:14:24.817 に答える