Question

我正在制作一个简单的绘画程序。我想动态地绘制矩形和圆形。我的意思是我想跟踪鼠标。我使用以下代码绘制矩形，它起作用。

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

在这种情况下如何绘制圆圈？

Answer 1

您需要计算连接起始拖动和当前鼠标位置的线的中点。

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>

使用Html 5绘制圆圈

1 个答案: