javascript - 平滑的 Javascript mousemove 类似于 Cubism.js

Question

我很好奇 Mike Bostock 如何能够以如此流畅的方式创建一条跟随鼠标光标的垂直线。如果你看这里http://square.github.com/cubism/ ，你可以明白我在说什么。

看看我刚刚在这里制作的一个简单示例:http://jsfiddle.net/zbfUq/

在我的示例中，有很多次该行实际上消失了。他是否正在做某种位置插值以在未记录的两个点之间创建平滑的平移？如果是这样，有人知道如何做这样的事情吗？

Answer 1

我已经为您制作了一个工作示例: http://jsfiddle.net/zbfUq/37/

本质上，您已经在 onmousemove 事件处理程序中记录了鼠标位置，但实际上并没有立即将线移动到那里。

然后您运行一个计时器，该计时器每隔一段时间检查一次(在我的示例中为每 10 毫秒一次)，并将线条移近鼠标位置。

在 onmouseover 事件中，我将行位置设置为鼠标位置，并设置了计时器。

在 onmouseout 事件中，我清除了计时器，并将行位置设置回 0(您也可以隐藏行)。

updatepos 函数首先检查直线距离鼠标位置有多远。如果距离小于 1px，它只是将线移动到鼠标位置。如果距离超过 1px，它会以与距离成正比的速度移动得更近(如果线距离鼠标较远，它会更快地移动)。

Javascript 代码

(function() {
    var selectline = document.getElementById('selection_line');
    var container = document.getElementById('page_content');
    var mouseX = 0;
    var lineX = 0;

    var linetimer;

    var updatepos = function () {
        var speed, distance;
        distance = Math.abs(mouseX - lineX);
        if (distance < 1) {
            lineX = mouseX;
        }
        else {
            speed = Math.round( distance / 10, 0 );
            speed = speed >= 1 ? speed : 1;
            lineX = (lineX < mouseX) ? lineX + speed : lineX - speed;
        }

        selectline.style.left = lineX + 'px';

    }

    $(container).on("mouseover", function(e) {
        lineX = mouseX;
        selectline.style.left = lineX + 'px';
        linetimer = setInterval(updatepos, 10);
    });

    $(container).on('mousemove', function(e) {
        mouseX = e.pageX;
        console.log(mouseX);
    });

    $(container).on("mouseout", function(e) {
        clearTimeout(linetimer);
        lineX = 0;
        selectline.style.left = LineX + 'px';
    });
})();​