mousedown时捕获所有鼠标坐标[重复]答案

【问题标题】：Capture all mouse coordinates while mousedown [duplicate]mousedown时捕获所有鼠标坐标[重复]
【发布时间】：2014-06-09 14:40:11
【问题描述】：

如何使用纯 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 事件发生时将其清除吗？我想对了吗？有更好的方法吗？

【问题讨论】：

@Nit：你怎么能不完整阅读问题来指出重复？我特别指出使用 Jquery 有答案。
解决问题的方法是一样的，你只需要使用vanilla Javascript而不是jQuery来绑定事件。

标签： javascript html

【解决方案1】：

您需要 3 个事件处理程序

如果 mousedown 将 ismousedown 设置为 true。如果 mouseup 将 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&erease 就像上面描述的圆圈和矩形基于 2 点（2 次点击）

http://jsfiddle.net/k5LUT/

您需要将 erease 设置为 c.strokeStyle='hsla(0,0%,0%,0)'; 并且填充无法正常工作。

【讨论】：

【解决方案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);

编辑：刚刚注意到您没有单击鼠标，并进行了相应的编辑。

【讨论】：

【解决方案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，这取决于您的意图

【讨论】：