html5 canvas-touchmove-如何计算速度和方向？

Question

所以我想衡量用户在html5画布上滑动的速度和方向如何？

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

如果我必须自己做，我在想：

• 获取触摸事件x和y，并将它们存储在数组变量中
• 计算2点之间的斜率（如果斜率不同，则可以求平均值）
• 不确定如何测量速度，也许无法测量点之间的距离？

还有其他想法吗？

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

要尝试，请在iPhone中转到该网址，然后将手指放在圆圈上，然后将其推到某个位置。 （或者，如果您有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);

谢谢乔尔

Answer 1

您只需执行以下步骤即可：

• 着陆，存储时间和位置
• 润饰，存储时间和位置

在与修饰相同的处理程序中，继续执行以下步骤：

• 从结束时间减去开始时间
• 计算起点和终点之间的距离
• 计算起点和终点之间的角度

为了获得与您相关的因素，请在时间差上划分距离。 值越高，速度越快。

Answer 2

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

• 起点和终点之间的时间戳 ，以像素/毫秒为单位。
• 帧速率（对于固定速率），以每帧像素或每秒像素为单位。

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