如何确定Javascript中从A点到B点的鼠标移动效率?

时间:2015-09-21 16:42:32

标签: javascript math

我正在尝试创建一个分析程序,用于跟踪用户在网站上的鼠标移动并将数据存储在数据库中。这是我被困的地方:

假设鼠标总是从屏幕中间开始,并且指示用户将其移动到特定元素,我该如何确定该移动的效率和准确性。我需要记住从开始悬停到点击的持续时间,但我还要包括鼠标的悬停路径。

一个完美的分数将是从A点到B点的完美线,在x秒内,如何在2x秒内确定曲线路径的分数,或者在进入Point之前路径走向错误的方向的实例B'有没有算法?

感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

这是我创建的JSFiddle。单击“开始”框,然后单击“完成”框。希望这会帮助您开始。

var start = false;
var start_time,end_time;
var points = [];

$("#start").click(function() {
    start = true;
    points = [];
    start_time = Date.now();
});

$("#finish").click(function() {
    start = false;
    distance = travelledDistance();
    time = (Date.now() - start_time)/1000;

    var center_x_start = $("#start").offset().left + $("#start").width() / 2;
    var center_y_start = $("#start").offset().top + $("#start").height() / 2;
    var center_x_finish = $("#finish").offset().left + $("#finish").width() / 2;
    var center_y_finish = $("#finish").offset().top + $("#finish").height() / 2;

    var straight_distance = Math.round(Math.sqrt(Math.pow(center_x_finish - center_x_start, 2) + Math.pow(center_y_finish - center_y_start, 2)));

    $("#time").text(+time+"s");
    $("#distance").text(distance+"px");
    $("#straight_distance").text(straight_distance+"px");

});

$(document).mousemove(function( event ) {
    if(!start)
        return;
    points.push(event.pageX + "," + event.pageY);
});

function travelledDistance(){
    var distance = 0;

    for (i = 0; i < points.length - 1; i++) { 
        start_point = points[i].split(",");
        end_point = points[i+1].split(",");

        distance += Math.round(Math.sqrt(Math.pow(end_point[0] - start_point[0], 2) +                                Math.pow(end_point[1] - start_point[1], 2)));
    }

    return distance;
}

<强>更新

我做了new version here。现在,您可以拖动目标以检查不同的结果。

相关问题