1

所以我想测量用户在 html5 画布上滑动的速度和方向?

似乎应该已经写了一些东西来做到这一点,所以我不必重新发明轮子,但我找不到任何东西。有人知道 JavaScript 函数吗?

如果我必须自己做,我在想:

  • 抓取触摸事件 x 和 y,将它们存储在数组变量中
  • 计算2点之间的斜率(如果斜率不同,可能会平均)
  • 不知道如何测量速度,也许是点之间的距离?

还有其他想法吗?

这是我的画布和我的形状,它监听触摸事件。当触摸我的 iphone 或 iphone 模拟器时,我通常会收到 1 或 2 个事件。我看坐标。我正在使用 kineticjs 作为舞台和形状。

要尝试它,请在您的 iPhone 中访问此 url,然后将手指放在圆圈上并将其推到某个地方。(或者如果你有 ios 模拟器,你也可以使用它)

这是我的小提琴:http: //jsfiddle.net/jnylund/uRgZZ/16/

   function writeMessage(messageLayer, message) {
   var context = messageLayer.getContext();
   messageLayer.clear();
   context.font = '18pt Calibri';
   context.fillStyle = 'black';
   context.fillText(message, 10, 25);
   var div = document.getElementById('tevents');
   div.innerHTML = div.innerHTML + message + "<BR/>";

}

var stage = new Kinetic.Stage({
   container: 'container',
   width: 460,
   height: 320
});

var layer = new Kinetic.Layer();
var messageLayer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
   x: stage.getWidth() / 2,
   y: stage.getHeight() / 2,
   radius: 40,
   fill: 'red',
   stroke: 'black',
   strokeWidth: 4 //,
   // draggable: true
});

circle.setX(230);
circle.setY(160);

circle.on('touchmove', function (event) {
   writeMessage(messageLayer, 'touch event length is ' + event.touches.length);
   for (var i = 0; i < event.touches.length; i++) {
       var touch = event.touches[i];
       writeMessage(messageLayer, 'event x: ' + touch.pageX + ', y: ' + touch.pageX);
   }

   var touchPos = stage.getTouchPosition();
   writeMessage(messageLayer, 'stage x: ' + touchPos.x + ', y: ' + touchPos.y);

});

// add the shape to the layer
layer.add(circle);

// add the layer to the stage
stage.add(layer);
stage.add(messageLayer);

谢谢乔尔

4

2 回答 2

8

您可以通过以下步骤简单地做到这一点:

  • 触地,存储时间和位置
  • 修饰,存储时间和位置

在与 touch up 相同的处理程序中继续执行以下步骤:

要获得与您相关的因素,请按时差划分距离。值越高,速度越快。

于 2013-04-19T09:37:38.620 回答
1

可以通过多种方式测量速度:

然后将值转换为您的应用程序中使用的比例,例如赛车的 kph 或 mph。

于 2013-04-18T19:44:15.307 回答