使用Html繪圖圈5

我正在製作一個簡單的繪畫程序。我想繪製矩形並動態地圈出。我的意思是我想跟蹤鼠標。我用下面的代碼繪製矩形，它工作。使用Html繪圖圈5

// The rectangle tool. 
tools.rect = function() { 
var tool = this; 
this.started = false; 

this.mousedown = function (ev) { 
    tool.started = true; 
    tool.x0 = ev._x; 
    tool.y0 = ev._y; 
}; 

this.mousemove = function (ev) { 
    if (!tool.started) { 
    return; 
    } 

    var x = Math.min(ev._x, tool.x0), 
     y = Math.min(ev._y, tool.y0), 
     w = Math.abs(ev._x - tool.x0), 
     h = Math.abs(ev._y - tool.y0); 

    context.clearRect(0, 0, canvas.width, canvas.height); 

    if (!w || !h) { 
    return; 
    } 

    context.strokeRect(x, y, w, h); 
}; 

this.mouseup = function (ev) { 
    if (tool.started) { 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 
};

我想對圓做同樣的事情。但是我遇到了麻煩，我使用了下面的代碼，但它不起作用。

// The circle tool. 
tools.circle = function() { 
var tool = this; 
this.started = false; 

this.mousedown = function (ev) { 
    tool.started = true; 
    tool.x0 = ev._x; 
    tool.y0 = ev._y; 
    tool.z0 = ev._z; 
}; 

this.mousemove = function (ev) { 
    if (!tool.started) { 
    return; 
    } 

    var x = Math.min(ev._x, tool.x0), 
     y = Math.min(ev._y, tool.y0), 
     r = Math.min(ev._z, tool.z0), 
     w = Math.abs(ev._x - tool.x0), 
     h = Math.abs(ev._y - tool.y0); 

    context.clearRect(0, 0, canvas.width, canvas.height); 

    context.beginPath(); 
    context.arc(x, y,r,0, 2*Math.PI,true); 
    context.stroke(); 
    context.closePath(); 
}; 

this.mouseup = function (ev) { 
    if (tool.started) { 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 
};

如何在這種情況下繪製一個圓？

來源

2013-02-28 user1422167

您需要計算連接起始拖動和當前鼠標位置的線的中點。

var midX=(startingX+currentX)/2; 
var midY=(startingY+currentY)/2;

然後，您需要計算適合該線的圓的半徑。

var dx= Math.abs(startinX-canMouseX); 
var dy= Math.abs(startinY-canMouseY); 
var r=Math.sqrt(dx*dx + dy*dy)/2;

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

<!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; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var lastX; 
    var lastY; 
    var strokeColor="red"; 
    var strokeWidth=2; 
    var canMouseX; 
    var canMouseY; 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var isMouseDown=false; 


    function handleMouseDown(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 

     // Put your mousedown stuff here 
     lastX=canMouseX; 
     lastY=canMouseY; 
     isMouseDown=true; 
    } 

    function handleMouseUp(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 

     // Put your mouseup stuff here 
     isMouseDown=false; 
    } 

    function handleMouseOut(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 

     // Put your mouseOut stuff here 
     isMouseDown=false; 
    } 

    function handleMouseMove(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 

     // Put your mousemove stuff here 
     if(isMouseDown){ 
     var dx= Math.abs(lastX-canMouseX); 
     var dy= Math.abs(lastY-canMouseY); 
     var midX=(lastX+canMouseX)/2; 
     var midY=(lastY+canMouseY)/2; 
     var r=Math.sqrt(dx*dx + dy*dy)/2; 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.beginPath(); 
     ctx.arc(midX, midY,r,0, 2*Math.PI,true); 
     ctx.stroke(); 
     } 
    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
    $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
    $("#canvas").mouseout(function(e){handleMouseOut(e);}); 

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

</head> 

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

來源

2013-02-28 22:38:08 markE

使用Html繪圖圈5

回答

相關問題