Question

我正在使用jQuery制作一个绘图应用程序，但我遇到了一个问题。

CodePen: https://codepen.io/mistahdukk/pen/dmaKOV

canvas.mousedown(function(e){
    down = true;
    draw(e);
}).mouseover(function(e){
    ctx.beginPath();
    draw(e);
}).mouseout(function(e){
    ctx.beginPath();
}).mousemove(draw).mouseup(function(){
    down =false;
    ctx.beginPath();
});

如果鼠标离开画布并且释放了单击并且鼠标重新进入画布，则应用程序将继续绘制，但我只想制作它以便仅在单击鼠标时绘制。我真的不知道如何解决这个问题。感谢。

Answer 1

新答案

试试这个：

var mouseDown = 0;
window.onmousedown = function() { 
  ++mouseDown;
}
window.onmouseup = function() {
  --mouseDown;
}

canvas.mousedown(function(e){
    down = true;
    draw(e);
}).mouseover(function(e){
    if(mouseDown) {
      down = true;
    }
    ctx.beginPath();
    draw(e);
}).mouseout(function(e){
    down =false; // <-- What you need to add
    ctx.beginPath();
}).mousemove(draw).mouseup(function(){
    down =false;
    ctx.beginPath();
});

受到这个答案的解决方案的启发：JavaScript: Check if mouse button down?

⋅ ⋅ ⋅

旧答案

在您的javascript代码结束时，您可以在down =false;事件上添加mouseout，以获得与mouseup事件相同的功能。

canvas.mousedown(function(e){
    down = true;
    draw(e);
}).mouseover(function(e){
    ctx.beginPath();
    draw(e);
}).mouseout(function(e){
    down =false; // <-- What you need to add
    ctx.beginPath();
}).mousemove(draw).mouseup(function(){
    down =false;
    ctx.beginPath();
});

Answer 2

在鼠标输出事件中，您还可以将变量设置为false .... copen

canvas.mousedown(function(e){
    down = true;
    draw(e);
}).mouseover(function(e){
    ctx.beginPath();
    draw(e);
}).mouseout(function(e){
  down =false;
    ctx.beginPath();
}).mousemove(draw).mouseup(function(){
    down =false;
    ctx.beginPath();
});

JavaScript / jQuery - 程序在鼠标离开画布后继续绘图

2 个答案: