html5 canvas - touchmove - 如何计算速度和方向？ [英] html5 canvas - touchmove - how to calculate velocity and direction?

问题描述

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

So I want to measure how fast and what direction a user swipes on an html5 canvas?

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

Seems like there should be something already written to do this so I dont have to re-invent the wheel, but I cant find anything. Anyone know of a JavaScript function?

如果我不得不这样做，我想的是：

If I had to do myself, I am thinking this:

• 抓住触摸事件x& y，将它们存储在数组变量中


• 计算2点之间的斜率（如果斜率不同，可以将其平均）


• 不确定如何测量速度，可能是点之间的距离？

任何其他想法？

这是我的画布和我的形状，它会听取触摸事件。触摸我的iphone或iphone模拟器时，我通常会收到1或2个事件。我看到了坐标。我正在使用kineticjs进行舞台和造型。

Here is my canvas and my shape, and it listens on touch events. When touch on my iphone or iphone simulator I usually get 1 or 2 events. I see the coordinates. I am using kineticjs for the stage and shape.

要试一试，请转到iPhone中的这个网址，然后将手指放在圆圈上并将其推到某处。 （或者，如果你有ios模拟器，你也可以使用它）

To try it, go to this url in your iphone and put your finger on the circle and push it somewhere. (or if you have ios simulator you can use that also)

这是我的小提琴：
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);

谢谢
Joel

thanks Joel

推荐答案

您可以通过以下步骤完成：

You can do it simply with these steps:

• 按下，存储时间和位置


• 补足，存储时间和位置

在与修补相同的处理程序中继续执行这些步骤：

In the same handler as touch up continue with these steps:

• 从结束时间减去开始时间


• 计算起点和终点之间的距离


• 计算在起点和终点之间转换

• Subtract start time from end time
• Calculate distance between start point and end point
• Calculate angle between start point and end point

获取与您相关的因子来划分时差。值越高，速度越快。

To get a factor to relate to you divide distance on time difference. The higher value the faster the velocity.

这篇关于html5 canvas - touchmove - 如何计算速度和方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！