Определение Android Отмена / Размах назад (проведите пальцем влево-вправо) с помощью jQuery - PullRequest
Новая
       27

Определение Android Отмена / Размах назад (проведите пальцем влево-вправо) с помощью jQuery

0 голосов
/ 17 января 2011

На 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);

Ответы [ 2 ]

0 голосов
/ 03 апреля 2013

Возможно, хорошим индикатором намерения смахивания может быть наклон линии смахивания: 

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 для вверх-влево или вниз-вправо.

0 голосов
/ 17 января 2011

Методом проб и ошибок я обнаружил, насколько это просто, исчисление не требуется.Время в миллисекундах должно быть достаточно быстрым, поэтому 350 мс или меньше.Дисперсия Y должна быть +40 или -40.Расстояние должно составлять 240 пикселей.

Обратите внимание, однако, что я использую этот тег META в своем коде относительно независимых от устройства пикселей: 

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

И способ обработки спины/ отмена события swipe: 

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 ().

...