Question

如何使用普通的javascript捕获鼠标在mousedown事件中移动的所有坐标？

var my_canvas=document.getElementById("drawing-pad");
var ctx=my_canvas.getContext("2d");
my_canvas.addEventListener("mousedown", draw_on_click, false);

function draw_on_click(e){
    var x_pos=e.clientX;
    var y_pos=e.clientY;
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(x_pos,y_pos,15,15);
}

我期待处理程序在每个坐标上运行（如果它会好的话会很好！）但我错了。

我在SO中看到了类似于我的问题here的答案，但是它使用了Jquery，我试图远离它，因为我想在获得更多核心和客户端javascript的熟练程度后开始使用Angular。

思考：有一件事情会浮现在脑海中。我应该在处理程序中使用setInterval并定期捕获clientX和clientY并在mouseup事件发生时清除它吗？我认为对吗？有更好的方法吗？

Answer 1

您需要3个事件处理程序

如果mousedown set ismousedown为true。如果mouseup set ismousedown为false。然后在mousemove中移动鼠标。

canvas.addEventListener('mousedown',mousedown,false);
canvas.addEventListener('mousedmove',mousedmove,false);
canvas.addEventListener('mouseup',mouseup,false);
var isMouseDown=false;

function mousedown(){
 isMouseDown=true
}
function mousemove(){
 if(isMouseDown){
  //do stuff
 }
}
function mouseup(){
 isMouseDown=false
}

这是一个部分工作的绘图演示。点击圆形矩形或绘制。 draw＆amp; erease如上所述，圆圈和rect基于2点（2次点击）

http://jsfiddle.net/k5LUT/

您需要设置为c.strokeStyle='hsla(0,0%,0%,0)';，并且填写无效。

Answer 2

当鼠标按下时设置标记，并在鼠标移动中捕获所有内容

var md = false, x, y;

var draw_on_click = function() {
    md = true;

    //do your thing...
}

var toggle_draw = function() {
    md = false;
}

var on_move = function() {
    if(md) {
        var x_pos=e.clientX;
        var y_pos=e.clientY;
    }    
}

my_canvas.addEventListener("mousedown", draw_on_click, false);
my_canvas.addEventListener("mouseup", toggle_draw, false);
my_canvas.addEventListener("mousemove", on_move, false);

编辑：刚刚注意到你有一个mousedown没有点击，相应地进行了编辑。

Answer 3

要关注您所提问题的answer，您可以执行以下操作：

my_canvas.addEventListener("mousedown", function() { 
    my_canvas.addEventListener("mousemove", draw_on_click, false); 
}, false);
my_canvas.addEventListener("mouseup", function() {
    my_canvas.removeEventListener("mousemove", draw_on_click, false);
}, false);

这正是jquery版本正在做的事情。

注意：如果用户拖动到画布外部，您可能需要收听全局mouseup，具体取决于您的意图

在mousedown时捕获所有鼠标坐标

3 个答案: