Question

当我从画布鼠标输出时，我需要删除未连接的点。我只是在使用moveTo和LineTo进行mousemove时绘制线条。当来自画布的mouseout必须省略未连接的点时。

以下是jquery的代码：

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/jquery.js"></script>
 <script type="text/javascript">
     $(function() {
        var canvas = $('#canvas');
        var context = canvas.get(0).getContext("2d");
        var clicked = false;
        var b=0;
        var storedLines = [];
        var storedLine = {};
        var mouse = {
            x: -1,
            y: -1
        }

        var parentOffset = $('#canvas').offset();
        canvas.click(function(e) {
           if (b==1)
           {
              $(this).unbind(e);
           }
           else
           {
              clicked = true;
              mouse.x = e.pageX - parentOffset.left;
              mouse.y = e.pageY - parentOffset.top;
              context.moveTo(mouse.x, mouse.y);
              if (clicked) {
                 storedLines.push({
                      startX: storedLine.startX,
                      startY: storedLine.startY,
                      endX: mouse.x,
                      endY: mouse.y
                 });
              }
              storedLine.startX = mouse.x;
              storedLine.startY = mouse.y;
              $(this).mousemove(function(k) {
                 context.clearRect(0, 0, 960, 500);
                 context.beginPath();
                 context.strokeStyle = "blue";
                 for (var i = 0; i < storedLines.length; i++) {
                    var v = storedLines[i];
                    context.moveTo(v.startX, v.startY);
                    context.lineTo(v.endX, v.endY);
                    context.stroke();
                 }
                 context.moveTo(mouse.x, mouse.y);
                 context.lineTo(k.pageX - parentOffset.left, k.pageY - parentOffset.top);
                 context.stroke();

                 context.closePath();
             });
          } 
    });
    $('#canvas').mouseout(function(e){
         $(this).unbind("mousemove");

         b=1;
    });

}）;

HTML code：

  <html>
  <body>
     <canvas id="canvas" width=600 height=600 ></canvas>
  </body>
  </html>

Answer 1

你不能设置像

这样的标志

var hasLeftCanvas = false;

并在离开画布时将其设置为true？

canvas.onmouseleave = function() {
    hasLeftCanvas = true;
}

然后，在你的脚本中：

$(this).mousemove(function(k) {
    if(!hasLeftCanvas) {
        context.clearRect(0, 0, 960, 500);
        context.beginPath();
        context.strokeStyle = "blue";
        for (var i = 0; i < storedLines.length; i++) {
            var v = storedLines[i];
            context.moveTo(v.startX, v.startY);
            context.lineTo(v.endX, v.endY);
            context.stroke();
         }
         context.moveTo(mouse.x, mouse.y);
         context.lineTo(k.pageX - parentOffset.left, k.pageY - parentOffset.top);
         context.stroke();

         context.closePath();
     }
 });

记得在光标重新进入画布时将其设置为false

Answer 2

要做的第一件事就是澄清代码：只有一个部分只处理鼠标，另一部分只处理这些行。
通过这种方式，您可以更好地了解每个活动会发生什么我开始有点澄清代码，你甚至应该创建一个类处理行（如果你处理它们中的几个将非常有用）。

jsbin在这里：http://jsbin.com/eseTODo/2/edit?js,output

var canvas = $('#canvas');
var context = canvas.get(0).getContext("2d");

// -----------------------------------------
//       Mouse

var clicked = false;
var onCanvas = false;

var mouse = {
    x: -1,
    y: -1
}
var parentOffset = $('#canvas').offset();

canvas.mousedown(function (e) {
    clicked = true;
    if (!onCanvas) return;
    mouse.x = e.pageX - parentOffset.left;
    mouse.y = e.pageY - parentOffset.top;
    addPoint(mouse.x, mouse.y);
    clearScreen();
    drawLines();
});

canvas.mouseup(function (e) {
    clicked = false;
    if (!onCanvas) return;
});

canvas.mousemove(function (e) {
    if (!onCanvas) return;
    clearScreen();
    drawLines();
    drawPendingLine(e.pageX - parentOffset.left,
    e.pageY - parentOffset.top);
});

canvas.mouseout(function (e) {
    onCanvas = false;
    clearScreen();
    drawLines();
    clearLines();
});

canvas.mouseenter(function (e) {
    onCanvas = true;
});

// -----------------------------------------
//       Lines

var storedLines = [];
var storedLine = {};
var startedALine = false;

function clearLines() {
    storedLines.length = 0;
    startedALine = false;
}

function addPoint(x, y) {
    if (startedALine) {
        storedLines.push({
            startX: storedLine.startX,
            startY: storedLine.startY,
            endX: x,
            endY: y
        });
    }
    startedALine = true;
    storedLine.startX = x;
    storedLine.startY = y
}

function drawLines() {
    context.strokeStyle = "blue";
    if (!startedALine) return;
    if (!storedLines.length) return;
    for (var i = 0; i < storedLines.length; i++) {
        var v = storedLines[i];
        context.beginPath();
        context.moveTo(v.startX, v.startY);
        context.lineTo(v.endX, v.endY);
        context.stroke();
        context.closePath();
    }
    context.stroke();
}

function drawPendingLine(lastX, lastY) {
    if (!startedALine) return;
    context.beginPath();
    context.strokeStyle = "green";
    context.moveTo(storedLine.startX, storedLine.startY);
    context.lineTo(lastX, lastY);
    context.stroke();
    context.closePath();
}


function clearScreen() {
    context.clearRect(0, 0, 600, 600);
}

如何从画布鼠标输出时删除未连接的点

2 个答案: