Как нарисовать круг с помощью дугового метода?

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

Я пытался создать инструмент, который рисует круг, используя метод arc, основываясь на этом коде:

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;

Сначала рассчитав радиус, затем добавив его к минимуму двух координат мыши,круг остается внутри ограничивающего прямоугольника, который вы ожидаете от того, как работает большинство графических программ.

Причина, по которой он раньше не работал, состоит в том, что круг имеет квадратную ограничивающую рамку, потому что его ширина и высотато же самое, но ограничивающий прямоугольник, созданный двумя координатами мыши, может быть не квадратным.