Piste de vitesse de la souris avec JS

Quelle est la meilleure façon de suivre la vitesse de la souris avec la plaine JS/JQuery? J'aimerais suivre combien de temps un utilisateur déplace la souris dans toutes les directions (haut/bas/gauche/droite).

OriginalL'auteur dandoen | 2011-06-20

  1. 15

    Les graphiques sparkline a un chouette exemple de suivi des mouvements de la souris et des graphiques. Leur code est disponible sur la source de leur site, commençant à la ligne 315.

    Simple et efficace.

    Voici le code:

     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;
 });
    Voici la pleine extrait - gist.github.com/ripper234/5757309
    Cette solution de suivi de la souris à distance? Pourquoi est la distance max de la différence de coordonnées x et y et non pas la somme des carrés des différences? Et est mrefreshinterval un "prédéfinis" attribut? Je ne vois pas comment vous l'utilisez. Merci.

    OriginalL'auteur Jonathan

  2. 7

    Même façon, vous obtenez la vitesse pour autre chose:

    speed = distance / time

acceleration = speed / time

    Et d'utilisation:

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

    Pour obtenir les coordonnées de la souris à chaque fois que la souris bouge.

    Oui, mais vous avez besoin d'au moins deux souris se déplace à l'heure est correcte. Supposons que vous avez déplacé la souris [5, 5], puis gelé pendant 10 secondes. Puis de vous déplacer rapidement à [10, 5] en une fraction de seconde, la sortie serait de 10 pixels en 10 secondes, parce que quand vous avez obtenu de [5, 5] a été la dernière fois que vous avez enregistré à l'horodatage. Je sais que pour le mouvement de la souris le premier déplacement réel n'est pas souvent question parce que vous êtes le déclenchement plus, mais je vais essayer ce pour touch, où vous avez juste un déplacement à travailler avec si vous balayez très rapide.
    Je suis d'accord avec @treznik, il n'est pas clair à partir de votre code comment vous obtenez la valeur de la variable "temps".
    S'il vous plaît montrer dans jsfiddle @connor

    OriginalL'auteur Connor Smith

  3. 6
    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;
});
    Veuillez ajouter une description à votre code. Pourquoi vous pensez que c'est une réponse? Les réponses incorrectes ou inefficace? Ou peut-être vous voulez montrer approche différente du problème? Poster simplement un bloc de code n'est pas une réponse.
    C'est plus correctement au lieu d'utiliser des intervalles. À chaque itération (à l'exception de la première), nous allons connaître la vitesse. Lorsque nous avons à l'aide d'intervalles, nous avons de la vitesse moyenne (dans cet intervalle).

    OriginalL'auteur Niloy

  4. 2

    C'est une méthode pour contrer le fait que vous pourriez commencer le suivi, mettre en pause, puis déplacez votre doigt ou la souris très rapidement (supposons qu'un coup de flick sur un écran tactile).

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

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

    J'ai fait ceci avec seulement le touchX dans cet exemple. L'idée est de prendre un instantané de la position x toutes les 200 millisecondes, puis prendre qu'à partir de la position actuelle, puis diviser par 200 (vitesse = distance /temps). Cela permettrait de garder une nouvelle mise à jour sur la vitesse. Le temps est de quelques millisecondes et le résultat serait le nombre de pixels parcourue par 200 millisecondes.

    OriginalL'auteur wazzaday