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

我通过反复试验发现这有多简单，不需要微积分。以毫秒为单位的时间必须相当快，所以 350 毫秒或更短。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 回答