畫布上的繪圖形狀

使用下面的代碼，我可以在畫布上畫出鼠標點。我需要檢測繪製線何時完成一個形狀並填充一些顏色。畫布上的繪圖形狀

<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var worksheetCanvas = $('#worksheet-canvas'); 

     var context = worksheetCanvas.get(0).getContext("2d"); 
     var clicked = false; 
     // The array of stored lines 
     var storedLines = []; 

     // The object for the last stored line 
     var storedLine = {}; 
     var mouse = { 
      x: -1, 
      y: -1 
     } 

     var parentOffset = $('#canvas-holder').parent().offset(); 
     worksheetCanvas.click(function (e) { 
      clicked = true; 

      mouse.x = e.pageX - parentOffset.left; 
      mouse.y = e.pageY - parentOffset.top; 

      context.moveTo(mouse.x, mouse.y); 

      // Push last line to the stored lines 

      if (clicked) { 
       storedLines.push({ 
        startX: storedLine.startX, 
        startY: storedLine.startY, 
        endX: mouse.x, 
        endY: mouse.y 
       }); 

      } 

      // set last line coordinates 

      storedLine.startX = mouse.x; 
      storedLine.startY = mouse.y; 

      $(this).mousemove(function (k) { 
       // clear the canvas 

       context.clearRect(0, 0, 960, 500); 
       context.beginPath(); 
       context.strokeStyle = "rgb(180,800,95)"; 

       // draw the stored lines 

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


      }) 

     }) 

    }); 
</script> 
</head> 
<body> 
<div id="canvas-holder"> 

<canvas id="worksheet-canvas" width="960" height="500" style="background:black;"> 

        </canvas> 

       </div> 


</body> 
</html>

來源

2013-03-20 chamara

[澄清後，編輯由海報]

該代碼將繪製/繼續折線到永遠的用戶點擊下一步。

如果用戶在它們開始的綠色圓圈中單擊，則會填充多段線。

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/qwd2a/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]--> 

<style> 
    body{ background-color: ivory; padding:10px; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasMouseX; 
    var canvasMouseY; 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var storedLines=[]; 
    var startX=0; 
    var startY=0; 
    var radius=7; 

    ctx.strokeStyle="orange"; 
    ctx.font = '12px Arial'; 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 

    function handleMouseDown(e){ 
     canvasMouseX=parseInt(e.clientX-offsetX); 
     canvasMouseY=parseInt(e.clientY-offsetY); 

     // Put your mousedown stuff here 
     if(hitStartCircle(canvasMouseX, canvasMouseY)){ 
      fillPolyline(); 
      return; 
     } 
     storedLines.push({x:canvasMouseX,y:canvasMouseY}); 
     if(storedLines.length==1){ 
      startX=canvasMouseX; 
      startY=canvasMouseY; 
      ctx.fillStyle="green"; 
      ctx.beginPath(); 
      ctx.arc(canvasMouseX, canvasMouseY, radius, 0 , 2 * Math.PI, false); 
      ctx.fill(); 
     }else{ 
      var c=storedLines.length-2; 
      ctx.strokeStyle="orange"; 
      ctx.lineWidth=3; 
      ctx.beginPath(); 
      ctx.moveTo(storedLines[c].x,storedLines[c].y); 
      ctx.lineTo(canvasMouseX, canvasMouseY); 
      ctx.stroke(); 
     } 
    } 

    function hitStartCircle(x,y){ 
     var dx=x-startX; 
     var dy=y-startY; 
     return(dx*dx+dy*dy<radius*radius) 
    } 
    function fillPolyline(){ 
     ctx.strokeStyle="red"; 
     ctx.fillStyle="blue"; 
     ctx.lineWidth=3; 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.beginPath(); 
     ctx.moveTo(storedLines[0].x,storedLines[0].y); 
     for(var i=0;i<storedLines.length;i++){ 
      ctx.lineTo(storedLines[i].x,storedLines[i].y); 
     } 
     ctx.closePath(); 
     ctx.fill(); 
     ctx.stroke(); 
     storedLines=[]; 
    } 

    $("#clear").click(function(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     storedLines=[]; 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Click to draw lines</p> 
    <p>Click back in the green circle to close+fill</p><br/> 
    <canvas id="canvas" width=300 height=300></canvas><br/> 
    <button id="clear">Clear Canvas</button> 
</body> 
</html>

[上一頁答案基於信息較少]

它看起來像你想：

讓用戶點擊畫布上的點。
在storedLines []中收集這些點。
稍後，使用storedLines []畫線+填充顏色。
（我假設你不想立即畫線，因爲你說「我需要檢測繪圖線何時完成......」。）如果你做要立即提請當用戶點擊，給我留下了評論，我可以幫你，替代過多;）

如果讓我來推薦幾個清理在你的代碼：

這是讓你的畫布上鼠標位置的好方法：

當你實際繪製的路徑與上下文和storedLines：

要關閉路徑，請在context.stroke（）和context.fill（）之前放置context.closePath（）。
設置fillStyle和strokeStyle。

做context.fill（）和context.stroke（） - 如果你不填充（），你將不會得到顏色填充。

// close a path 
context.closePath(); 
context.fillStyle=」blue」; 
context.strokeStyle=」rgb(180,80,95)」; 
context.fill(); 
context.stroke();

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/zYsQh/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]--> 

<style> 
    body{ background-color: ivory; padding:10px; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasMouseX; 
    var canvasMouseY; 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var storedLines=[]; 

    ctx.strokeStyle="orange"; 
    ctx.font = '12px Arial'; 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 

    function handleMouseDown(e){ 
     canvasMouseX=parseInt(e.clientX-offsetX); 
     canvasMouseY=parseInt(e.clientY-offsetY); 

     // Put your mousedown stuff here 
     storedLines.push({x:canvasMouseX,y:canvasMouseY}); 
     var count=storedLines.length; 
     var X=canvasMouseX-(count<10?4:7); 
     ctx.strokeStyle="orange"; 
     ctx.fillStyle="black"; 
     ctx.lineWidth=1; 
     ctx.beginPath(); 
     ctx.arc(canvasMouseX, canvasMouseY, 8, 0 , 2 * Math.PI, false); 
     ctx.fillText(storedLines.length, X, canvasMouseY+4); 
     ctx.stroke(); 
    } 

    $("#draw").click(function(){ 
     ctx.strokeStyle="red"; 
     ctx.fillStyle="blue"; 
     ctx.lineWidth=3; 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.beginPath(); 
     ctx.moveTo(storedLines[0].x,storedLines[0].y); 
     for(var i=0;i<storedLines.length;i++){ 
      ctx.lineTo(storedLines[i].x,storedLines[i].y); 
     } 
     ctx.closePath(); 
     ctx.fill(); 
     ctx.stroke(); 
     storedLines=[]; 
    }); 

    $("#clear").click(function(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     storedLines=[]; 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Click to create storedLines[]</p> 
    <p>Then press the Draw button to fill the path</p><br/> 
    <canvas id="canvas" width=300 height=300></canvas><br/> 
    <button id="clear">Clear Canvas</button> 
    <button id="draw">Draw</button> 
</body> 
</html>

來源

2013-03-20 15:37:26 markE

喜！謝謝您的幫助。我實際上需要在用戶單擊並用顏色填充顏色時填寫線條 – chamara 2013-03-21 01:59:01

沒問題...當用戶單擊並填充完成時，我已根據繪製線修改了我的答案 - 乾杯:) – markE 2013-03-21 02:52:28

您好！需要幫助。我需要在繪圖時用光標懸掛繪圖線。我試圖用mousemove事件，但沒有得到它的工作。 – chamara 2013-03-21 10:51:37

如果您storedLines陣列包含在它的所有值的精確副本，那麼你已經繪製的形狀，否則你有沒有......

例子：

你畫三條線畫一個三角形

線路1 - （0,0）到（10,0）

線路2 - （10,0）到（5,10）

行3 - （5,10）到（0,0）

因此，所有點都有它的副本。

來源

2013-03-20 07:37:43

畫布上的繪圖形狀

回答

相關問題