所以我想测量用户在 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);
谢谢乔尔