0

I am working on a simple paint program. I want to draw rectangle and circle dynamicly. I mean I want to keep track of mouse. I used the following code to draw rectangle and it worked.

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

I want to do the same for circle. But I am having trouble, I used following code, but it does not work. 

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

How can I draw a circle in this case?

4

1 に答える 1

2

開始ドラッグと現在のマウス位置を結ぶ線の中点を計算する必要があります。

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-28T22:38:08.933 に答える