为什么圆圈在画布上沿 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

您可以使用毕达哥拉斯定理来获得从您在画布上单击的点到您将鼠标拖动到的点的距离 - 从而获得圆的半径。 现在只需从最初的“点击”位置绘制圆圈。

这是为您的圈子修改后的 mousemove 函数：

        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;

在

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;