Почему круг движется в направлении x и y на холсте?

Question

Я пытаюсь сделать простую программу рисования, и я медленно добираюсь туда.Но у инструмента круга есть небольшая проблема.Круг немного перемещается, когда пользователь нажимает и перетаскивает.Этого не происходит с инструментом прямоугольник, овал и многоугольник.Как это можно исправить?

Вот код для рисования круга

            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 radius = Math.max(Math.abs(ev._x - tool.x0), Math.abs(ev._y - tool.y0)) / 2;
                    var x = Math.min(ev._x, tool.x0) + radius;
                    var y = Math.min(ev._y, tool.y0) + radius;
                    context.fillStyle = 'hsl(' + 360 * Math.random() + ', 85%, 50%)';
                    context.beginPath();
                    context.arc(x, y, radius, 0, Math.PI * 2, false);
                    context.stroke();
                    context.closePath();
                    context.fill();
                };
                this.mouseup = function (ev) {
                    if (tool.started) {
                        tool.mousemove(ev);
                        tool.started = false;
                        drawCanvas();
                    }
                };
            };

А вот рабочий код для овала

        tools.oval = 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 radius1 = Math.abs(ev._x - tool.x0);
                    var radius2 = Math.abs(ev._y - tool.y0);
                    var scaleX = radius1 / (Math.max(radius1, radius2));
                    var x = tool.x0 / scaleX;
                    var scaleY = radius2 / (Math.max(radius1, radius2));
                    var y = tool.y0 / scaleY;
                    context.fillStyle = 'hsl(' + 360 * Math.random() + ', 100%, 50%)';
                    context.save();
                    context.scale(scaleX, scaleY);
                    context.beginPath();
                    context.arc(x, y, Math.max(radius1, radius2), 0, 2 * Math.PI);
                    context.restore();
                    context.stroke();
                    context.closePath();
                    context.fill();
                };
                this.mouseup = function (ev) {
                    if (tool.started) {
                        tool.mousemove(ev);
                        tool.started = false;
                        drawCanvas();
                    }
                };
            };

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

Answer 1

Вы можете использовать теорему Пифагора, чтобы получить расстояние от точки, на которой вы щелкнули на холсте, до точки, куда вы перетаскиваете мышь, - таким образом, радиус вашего круга.Теперь просто нарисуйте круг из начальной позиции «щелчка».

Вот модифицированная функция перемещения мыши для вашего круга:

        this.mousemove = function(ev) {
          if (!tool.started) {
            return;
          }
          context.clearRect(0, 0, canvas.width, canvas.height);
          var tempX = ev._x - tool.x0;
          var tempY = ev._y - tool.y0;
          var radius = Math.sqrt(tempX * tempX + tempY * tempY);
          var scale = radius / radius;
          var x = tool.x0 / scale;
          var y = tool.y0 / scale;
          context.fillStyle = 'hsl(' + 360 * Math.random() + ', 100%, 50%)';
          context.save();
          context.scale(scale, scale);
          context.beginPath();
          context.arc(x, y, radius, 0, 2 * Math.PI);
          context.restore();
          context.stroke();
          context.closePath();
          context.fill();
        };

Answer 2

Исходя из вашего кода, вам нужно изменить следующие строки:

//causes pointer moving from circle these lines:
var radius = Math.max(Math.abs(ev._x - tool.x0), Math.abs(ev._y - tool.y0))/2;
//causes center moving
var x = Math.min(ev._x, tool.x0) + radius;
var y = Math.min(ev._y, tool.y0) + radius;

in

var radius = Math.max(Math.abs(ev._x - tool.x0), Math.abs(ev._y - tool.y0));
var x =  tool.x0;
var y =  tool.y0;

Answer 3

Вы перемещаете свой центр, пересчитывая минимальное значение между вашей начальной начальной точкой и вашим текущим местоположением мыши.Если вы хотите, чтобы центр круга оставался неподвижным, ваши координаты x и y должны оставаться фиксированными:

var x = tool.x0;
var y = tool.y0;