web-dev-qa-db-ja.com

JSでマウスの速度を追跡する

プレーンなJS/JQueryでマウスの速度を追跡するための最良の方法は何ですか？ユーザーがマウスをすべての方向（上/下/左/右）に動かす速度を追跡したいと思います。

javascriptperformancemouse
18
dandoen

スパークラインには気の利いた例があります マウスの動きを追跡してグラフ化する。彼らのコードは、315行目からサイトのソースで入手できます。

シンプルで効果的。

コードは次のとおりです。

 var mrefreshinterval = 500; // update display every 500ms
 var lastmousex=-1; 
 var lastmousey=-1;
 var lastmousetime;
 var mousetravel = 0;
 $('html').mousemove(function(e) {
     var mousex = e.pageX;
     var mousey = e.pageY;
     if (lastmousex > -1)
         mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
     lastmousex = mousex;
     lastmousey = mousey;
 });
14
Jonathan
var timestamp = null;
var lastMouseX = null;
var lastMouseY = null;

document.body.addEventListener("mousemove", function(e) {
    if (timestamp === null) {
        timestamp = Date.now();
        lastMouseX = e.screenX;
        lastMouseY = e.screenY;
        return;
    }

    var now = Date.now();
    var dt =  now - timestamp;
    var dx = e.screenX - lastMouseX;
    var dy = e.screenY - lastMouseY;
    var speedX = Math.round(dx / dt * 100);
    var speedY = Math.round(dy / dt * 100);

    timestamp = now;
    lastMouseX = e.screenX;
    lastMouseY = e.screenY;
});
7
Niloy

他のものの速度を得るのと同じ方法：

speed = distance / time

acceleration = speed / time

そして使用：

 $(document).mousemove(function(e){
     var xcoord = e.pageX;
     var ycoord = e.pageY;
 });

マウスが動くたびにマウスの座標を取得します。

7
Connor Smith

これは、追跡を開始し、一時停止してから、指またはマウスを非常にすばやく動かすことができるという事実に対抗する方法です（タッチスクリーンで突然フリックしたとします）。

var time = 200
var tracker = setInterval(function(){
    historicTouchX = touchX;
}, time);

document.addEventListener("touchmove", function(){
    speed = (historicTouchX - touchX) / time;
    console.log(Math.abs(speed));
}, false);

この例では、touchXのみを使用してこれを実行しました。アイデアは、200ミリ秒ごとにx位置のスナップショットを取得し、それを現在の位置から取得して、200で除算することです（速度=距離/時間）。これにより、速度が最新の状態に保たれます。時間はミリ秒で、出力は200ミリ秒あたりに移動したピクセル数になります。

2
wazzaday