jQuery 获取 mousedown 和 mouseup 之间的所有 x 和 y

Question

我正在使用 Raphael 制作一个简单的绘图应用程序。我现在正在尝试绘制波浪线（有没有更好的词），所以我想捕获mousedown和mouseup之间的所有x和y。在这个 stackoverflow 问题jQuery continuous mousedown 有一个解决方案可以在事件之间做一些事情，但我无法让 x 和 y 正常工作。我正在尝试使用 mousemove() 来获取它，但是当函数结束时 mousemove() 并没有停止。并且让 get 的 x 和 y 调用它的函数让我陷入无限循环。所以......两件事，如何连续获取x和y以及如何避免无限循环。我知道如何将它放入一个数组并在之后制作一条波浪线，而不是如何做鼠标监听器。我现在的代码是：

var paper = new Raphael($('#canvas')[0], 500, 500);
var canvas =$('#canvas');

var stillDown = false;
canvas.mousedown(function(){
    console.log("down");
    stillDown = true;
    whileDown();
});

function whileDown(){
    if(!stillDown){return;}else{
    console.log("Still in down.");
        canvas.mousemove(function(e){
        //console.log("X: " + e.offsetX + " Y: " + e.offsetY);
    });
    whileDown();
    }
}

canvas.mouseup(function(){
    stillDown = false;
});

我当前的目标是让它在控制台中显示它已关闭，所有 x 和 y 都在关闭，并且它已启动，之后什么都没有。然后我会处理这些信息。无论如何，任何帮助都会很棒！

Answer 1

在鼠标按下时，只需设置布尔标志：

var stillDown = false;
canvas.mousedown(function(){
    console.log("down");
    stillDown = true;
});

在鼠标移动时，如果设置了标志，则将坐标推送到数组：

var coords = [];
canvas.mousemove(function(e){
    if(!stillDown) return;
    console.log("moving");
    coords.push({x: e.offsetX, y: e.offsetY});
    // and/or do whatever you need with the coordinates  
}

在 mouseup 时，取消设置标志：

canvas.mouseup(function(){
    stillDown = false;
});