使用鼠标移动画布形状

按下按钮后，我想在画布上的鼠标指针的顶端绘制一个圆圈，然后在用户再次单击时放置它。下面是我到目前为止有：使用鼠标移动画布形状

$("#button").click(function(e){ 
      var canvas = document.getElementById('MyCanvas'); 
      var context = canvas.getContext('2d'); 
      canvas.addEventListener('mousemove', function(evt) { 
      var mousePos = getMousePos(canvas, evt); 
      var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; 
      console.log(message); 
      var nodehandle = document.getElementById('circle'); 
      if(mousePos.x && mousePos.y) {   
     nodehandle.x = mousePos.x; 
     nodehandle.y = mousePos.y; 
     flag = 1; 
    } 
      }, false); 
    }); 

function getMousePos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 
     return { 
      x: evt.clientX - rect.left, 
      y: evt.clientY - rect.top 
     }; 
     }

我的问题是，当我画这样一个圆圈：

function drawCircle(mouseX, mouseY){ 
    var c = document.getElementById("grid"); 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(95,50,5,0,2*Math.PI); 
    ctx.stroke(); 
}

我不知道如何选择圆（中的getElementById（”圆'）即使我添加ctx.id ='圆'到drawCircle函数返回null）。每当鼠标移动时，我也需要清除并重新绘制圆圈，我相信有一个很好的方法可以做到这一点，但我没有意识到这一点。

来源

2014-03-02 blueintegral

你在画布上画的任何东西 - 像圆圈，就像画布上的油漆一样。

您的圈子无法像html元素一样被选中或移动。

要移动圆圈，您必须清除画布并在不同位置重绘圆圈。

在对象中存储有关圆的信息很方便。

var circle1 = { centerX:100, centerY=100, radius=20 }

，你能画CIRCLE1使用信息：

ctx.beginPath(); 
ctx.arc(circle1.centerX, circle1.centerY, circle1.radius, 0,Math.PI*2); 
ctx.closePath(); 
ctx.fill();

在超过1圈，你可以创建一个圆阵，并把每一个圆圈对象成数组

var circles=[]; 
circles.push(circle1);

然后要“移动”一个圆圈，只需将对象的centerX/centerY更改为鼠标位置，然后重画画布上的所有圆。

circle1.centerX=mouseX; 
circle1.centerY=mouseY; 

// Clear the canvas and redraw all circles 
// The "moved" circle will be redrawn at its new position 

function drawAll(){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    for(var i=0;i<circles.length;i++){ 
     var c=circles[i]; 
     ctx.beginPath(); 
     ctx.arc(c.centerX,c.centerY,c.radius,0,Math.PI*2); 
     ctx.closePath(); 
     ctx.fillStyle=c.color; 
     ctx.fill(); 
    } 
}

您可以使用HTML单选按钮来确定一个鼠标点击会做哪些动作：

创建在鼠标位置的新圈子，或
选择鼠标的位置下面的圆圈或
“移动”当前选定的圆

这里的示例代码和一个演示：http://jsfiddle.net/m1erickson/CEB7T/

<!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> 
<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    // get references to the canvas and its context 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var $canvas=$("#canvas"); 

    // get the canvas position on the page 
    // used to get mouse position 
    var canvasOffset=$canvas.offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var scrollX=$canvas.scrollLeft(); 
    var scrollY=$canvas.scrollTop(); 
    ctx.lineWidth=3; 

    // save info about each circle in an object 
    var circles=[]; 
    var selectedCircle=-1; 

    // the html radio buttons indicating what action to do upon mousedown 
    var $create=$("#rCreate")[0]; 
    var $select=$("#rSelect")[0]; 
    var $move=$("#rMove")[0]; 

    // draw all circles[] 
    function drawAll(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     for(var i=0;i<circles.length;i++){ 
      var c=circles[i]; 
      ctx.beginPath(); 
      ctx.arc(c.cx,c.cy,c.radius,0,Math.PI*2); 
      ctx.closePath(); 
      ctx.fillStyle=c.color; 
      ctx.fill(); 
      // if this is the selected circle, highlight it 
      if(selectedCircle==i){ 
       ctx.strokeStyle="red"; 
       ctx.stroke(); 
      } 
     } 
    } 

    function handleMouseDown(e){ 
     e.preventDefault(); 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     if($create.checked){ 
      // create a new circle a the mouse position and select it 
      circles.push({cx:mouseX,cy:mouseY,radius:10,color:randomColor()}); 
      selectedCircle=circles.length-1; 
     } 
     if($select.checked){ 
      // unselect any selected circle 
      selectedCircle=-1; 
      // iterate circles[] and select a circle under the mouse 
      for(var i=0;i<circles.length;i++){ 
       var c=circles[i]; 
       var dx=mouseX-c.cx; 
       var dy=mouseY-c.cy; 
       var rr=c.radius*c.radius; 
       if(dx*dx+dy*dy<rr){ selectedCircle=i; } 
      } 
     } 
     if($move.checked && selectedCircle>=0){ 
      // move the selected circle to the mouse position 
      var c=circles[selectedCircle]; 
      c.cx=mouseX; 
      c.cy=mouseY; 
     } 

     // redraw all circles 
     drawAll(); 
    } 

    // return a random color 
    function randomColor(){ 
     return('#'+Math.floor(Math.random()*16777215).toString(16)); 
    } 

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

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <input type="radio" name="grp1" id="rCreate" checked>Click will create a new circle.<br> 
    <input type="radio" name="grp1" id="rSelect">Click will select an existing circle.<br> 
    <input type="radio" name="grp1" id="rMove">Click will move selected circle.<br> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

来源

2014-03-03 05:13:32 markE

使用鼠标移动画布形状

回答

相关问题