Question

我正在尝试用javascript制作一个基本的绘画程序。

我添加了用于矩形，直线和徒手画的工具。现在，我需要添加一个用于绘制圆的工具。我找到了画圆的代码，但是我不知道如何实现和更改它以适合我已有的代码。

用于绘制线条工具的代码如下

  tools.line = 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;
      }

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

      context.beginPath();
      context.moveTo(tool.x0, tool.y0);
      context.lineTo(ev._x,   ev._y);
      context.stroke();
      context.closePath();
    };

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

我试图根据此代码制作一种使用圆弧方法绘制圆的工具：

context.beginPath();
context.arc(X, Y, R, 0, 2 * Math.PI, false);
context.lineWidth = 3;
context.strokeStyle = '#FF0000';
context.stroke();

我试图做这样的事情。也许不用说，根本没有任何工作结果。

  tools.circle = 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;
      }

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

    var x = (mouse.x + start_mouse.x) / 2;
    var y = (mouse.y + start_mouse.y) / 2;

    var radius = Math.max(
        Math.abs(mouse.x - start_mouse.x),
        Math.abs(mouse.y - start_mouse.y)
    ) / 2;

    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI*2, false);
    context.stroke();
    context.closePath();

};

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

完整的代码可以在这里Pastebin

看到

Answer 1

我认为您想要类似的内容：https://jsfiddle.net/byfwuhmj/

区别是：

var radius = Math.max(
    Math.abs(mouse.x - start_mouse.x),
    Math.abs(mouse.y - start_mouse.y)
) / 2;

var x = Math.min(mouse.x, start_mouse.x) + radius;
var y = Math.min(mouse.y, start_mouse.y) + radius;

通过首先计算半径，然后将其添加到两个鼠标坐标的最小值中，圆便位于大多数图形程序工作方式所期望的边界框中。

之所以不能以这种方式工作，是因为圆具有正方形的边界框，因为其宽度和高度相同，但是由两个鼠标坐标创建的边界框可能不是正方形。

如何用圆弧法画一个圆？

1 个答案: