Javascript 如何在从画布上鼠标移出时删除未连接的点_Javascript_Jquery_Html_Canvas

Javascript 如何在从画布上鼠标移出时删除未连接的点

javascript jquery html canvas

Javascript 如何在从画布上鼠标移出时删除未连接的点,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,当我从画布上鼠标移出时，我需要移除未连接的点。我只是在使用moveTo和LineTo移动鼠标时画线。当鼠标从画布移出时，必须忽略未连接的点以下是jquery的代码： <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/jquery.js"></script> <script type="te

当我从画布上鼠标移出时，我需要移除未连接的点。我只是在使用moveTo和LineTo移动鼠标时画线。当鼠标从画布移出时，必须忽略未连接的点

以下是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;
    });


$（函数（）{
var canvas=$（“#canvas”）；
var context=canvas.get（0.getContext（“2d”）；
var=false；
var b=0；
var storedLines=[]；
var storedLine={}；
变量鼠标={
x:-1，
y:-1
}
var parentOffset=$（'#canvas'）.offset（）；
画布。单击（函数（e）{
如果（b==1）
{
美元（本）。解除绑定（e）；
}
其他的
{
单击=真；
mouse.x=e.pageX-parentOffset.left；
mouse.y=e.pageY-parentOffset.top；
moveTo（mouse.x，mouse.y）；
如果（单击）{
存储线路({
startX:storedLine.startX，
startY:storedLine.startY，
endX:mouse.x，
老鼠，老鼠
});
}
storedLine.startX=mouse.x；
storedLine.startY=mouse.y；
$（this）.mousemove（函数（k）{
clearRect（0,0960500）；
context.beginPath（）；
context.strokeStyle=“蓝色”；
对于（变量i=0；i


}))；

HTML代码：
  <html>
  <body>
     <canvas id="canvas" width=600 height=600 ></canvas>
  </body>
  </html>

你不能像这样设置一个标志吗
var hasLeftCanvas = false;

当你离开画布时把它设为真
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();
     }
 });

$（this）.mousemove（函数（k）{
如果（！hasleeftcanvas）{
clearRect（0,0960500）；
context.beginPath（）；
context.strokeStyle=“蓝色”；
对于（变量i=0；i

当光标重新进入画布时，请记住将其设置回false（假）
首先要澄清代码：一部分只处理鼠标，另一部分只处理行。

这样，您就可以更好地了解每项活动将发生的情况。

我开始澄清代码，您甚至应该创建一个类处理行（如果您处理其中的几个行，这将非常有用）
jsbin在这里：
var canvas=$（'#canvas'）；
var context=canvas.get（0.getContext（“2d”）；
// -----------------------------------------
//老鼠
var=false；
var onCanvas=假；
变量鼠标={
x:-1，
y:-1
}
var parentOffset=$（'#canvas'）.offset（）；
canvas.mousedown（函数（e）{
单击=真；
如果（！onCanvas）返回；
mouse.x=e.pageX-parentOffset.left；
mouse.y=e.pageY-parentOffset.top；
addPoint（mouse.x，mouse.y）；
清除屏幕（）；
抽绳（）；
});
canvas.mouseup（函数（e）{
单击=假；
如果（！onCanvas）返回；
});
canvas.mousemove（函数（e）{
如果（！onCanvas）返回；
清除屏幕（）；
抽绳（）；
drawPendingLine（e.pageX-parentOffset.left，
e、 pageY-parentOffset.top）；
});
canvas.mouseout（函数（e）{
onCanvas=假；
清除屏幕（）；
抽绳（）；
clearLines（）；
});
canvas.mouseenter（函数（e）{
onCanvas=true；
});
// -----------------------------------------
//线条
var storedLines=[]；
var storedLine={}；
var startedALine=false；
函数clearLines（）{
storedLines.length=0；
startedALine=false；
}
函数添加点（x，y）{
if（startedALine）{
存储线路({
startX:storedLine.startX，
startY:storedLine.startY，
(完):，
恩迪：是的
});
}
startedALine=true；
storedLine.startX=x；
storedLine.startY=y
}
函数drawLines（）{
context.strokeStyle=“蓝色”；
如果（！startedALine）返回；
如果（！storedLines.length）返回；
对于（变量i=0；i尝试了基础数学。有两个循环。未连接的点或可能是不相交的线？未连接的点是一组单独的点？不相交的线…在上面提到的代码中，单击时，会触发mousemove事件，并在moveTo和LineTo之间绘制线。假设当鼠标从画布上移出时，我不想画线。有一个边缘案例（双关语）你没有提到。当鼠标移动时会发生什么
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);
}