使用鼠標移動畫布形狀

按下按鈕後，我想在畫布上的鼠標指針的頂端繪製一個圓圈，然後在用戶再次單擊時放置它。下面是我到目前爲止有：使用鼠標移動畫布形狀

$("#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

使用鼠標移動畫布形狀

回答

相關問題