如何從canvas中刪除未連接的點當我將mouseout從canvas中刪除時，需要刪除未連接的點。

當使用moveTo和LineTo移動鼠標時，我只畫線。從畫布的鼠標移出時必須省略未連接的點。如何從canvas中刪除未連接的點當我將mouseout從canvas中刪除時，需要刪除未連接的點。

這裏是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代碼：

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

來源

2014-01-17 sankar

試過基本數學嗎？ http://www.wikihow.com/Algebraically-Find-the-Intersection-of-Two-Lines。有兩個循環。 – Cracker0dks

未連接的點或可能是不相交的線？而不連接的點是單獨的單獨點？ – Pinal

不相交的行...在上面的代碼中提到，單擊時，它會觸發mousemove事件並在moveTo和LineTo之間畫線。假設當從畫布鼠標我不想畫線.. – sankar

首先要做的將其設置爲false是澄清代碼：有一個只處理鼠標的部分，另一個只處理線條的部分。
通過這種方式，您可以更好地瞭解每個事件會發生什麼。
我開始講清楚代碼，你甚至應該創建一個類處理行（如果你處理其中的幾個，這將非常有用）。

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); 
}

來源

2014-01-17 16:19:47 GameAlchemist

你不能設置像

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(); 
    } 
});

記得當光標重新進入畫布

來源

2014-01-17 14:17:10

如何從canvas中刪除未連接的點當我將mouseout從canvas中刪除時，需要刪除未連接的點。

回答

相關問題