在画布上绘制区域

我需要在绘制时用光标悬挂绘图线。我试图用mousemove事件，但没有得到它的工作。以下是我现在所拥有的。在画布上绘制区域

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 = []; 
     });

来源

2013-03-24 chamara

用帆布你负责重绘的全部内容每次它是必要的。这意味着当鼠标光标移动时，您需要清除画布，然后重新绘制所有当前线段。基于您的代码我想出了下面的示例因为它可以如何做：当用户移动鼠标光标

<html> 
<head> 
    <title>Canvas</title> 
</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> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     var canvas = document.getElementById("canvas"), 
      ctx = canvas.getContext("2d"), 
      offset = $("#canvas").offset(), 
      storedLines = [], 
      polyLines = [], 
      start = {x: 0, y: 0}, 
      radius = 7; 

     function canvasPosition(e) { 
      return { 
       x: parseInt(e.clientX - offset.left), 
       y: parseInt(e.clientY - offset.top) 
      }; 
     } 

     $("#canvas").mousedown(function (e) { 
      var pos = canvasPosition(e); 
      if (hitStartCircle(pos)) { 
       polyLines.push(storedLines); 
       storedLines = []; 
       draw(); 
      } 
      else 
      { 
       storedLines.push(pos); 
       update(pos); 
      } 
     }) 
     .mousemove(function (e) { 
      update(canvasPosition(e)); 
     }); 

     // Draw completed polylines 
     function draw() { 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      $.each(polyLines, function (idx, polyLine) { 
       fillPolyline(polyLine); 
      }); 
     } 

     // Update shape currently being drawn 
     function update(position) { 
      var len = storedLines.length; 
      if(len==0) return; 

      draw(); 
      ctx.fillStyle = "green"; 
      ctx.beginPath(); 
      ctx.arc(storedLines[0].x, storedLines[0].y, radius, 0, 2 * Math.PI, false); 
      ctx.fill(); 

      ctx.strokeStyle = "orange"; 
      ctx.lineWidth = 3; 
      ctx.beginPath(); 
      ctx.moveTo(storedLines[0].x, storedLines[0].y); 
      for(var i=1; i<len; ++i) { 
       ctx.lineTo(storedLines[i].x, storedLines[i].y) 
      } 
      ctx.lineTo(position.x, position.y); 
      ctx.stroke(); 
     }; 

     function hitStartCircle(pos) { 
      var start = storedLines[0] || {x:0, y:0}, 
       dx = pos.x - start.x, 
       dy = pos.y - start.y; 
      return (dx * dx + dy * dy < radius * radius) 
     } 

     function fillPolyline(lines) { 
      ctx.strokeStyle = "red"; 
      ctx.fillStyle = "blue"; 
      ctx.lineWidth = 3; 
      ctx.beginPath(); 
      ctx.moveTo(lines[0].x, lines[0].y); 
      for (var i = 0; i < lines.length; i++) { 
       ctx.lineTo(lines[i].x, lines[i].y); 
      } 
      ctx.closePath(); 
      ctx.fill(); 
      ctx.stroke(); 
     } 

     $("#clear").click(function() { 
      polyLines = []; 
      draw(); 
     }); 
}); 
</script> 
</body> 
</html>

这将正确更新的最后一段。

来源

2013-03-24 14:13:52 TAS

嗨！谢谢你的解决方案。是否有任何事情我可以尝试记住完成后填充的多边形？ – chamara 2013-03-25 02:07:57

@chamara请看我最后的编辑。 – TAS 2013-03-25 09:58:21

@TAS：您的解决方案非常棒！有一些最简单的方法来编辑绘制的形状（移动一个坐标）？ – kicaj 2014-10-18 15:36:34

从看你的jsfiddle，有绘制新线时的偏移量。这是因为你的CSS中的身体填充发生。

只需更换这一点：

body { 
    background-color: ivory; 
    padding:10px; 
}

与此：

body { 
    background-color: ivory; 
}

来源

2013-03-24 14:08:54

在画布上绘制区域

回答

相关问题