Question

我试图用鼠标在画布上绘制一个圆圈，但我的数学错误，我无法弄清楚如何修复它。我希望圆圈的顶部（或底部）和圆的边与光标的十字准线对齐，然后单击并拖动以制作圆。

有问题的数学看起来像这样：

    var centerx = self.startDragPos.x + (mouse.x-self.startDragPos.x)/2;
    var centery = self.startDragPos.y + (mouse.y-self.startDragPos.y)/2;
    var radius = Math.sqrt(Math.pow(self.startDragPos.x - mouse.x, 2) + Math.pow(self.startDragPos.y - mouse.x, 2))/2;

    ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);

公式看起来正确，我哪里出错？

更新

感谢您提出的所有好建议。我没有非常清楚地提出这个问题，但Av Avt给了我一些我需要弄明白的线索。万一你想知道我的意思：http://jsfiddle.net/n17hqe14/6/

Answer 1

var centerx = startDragPos.x;
var centery = startDragPos.y;
var radius = Math.sqrt(Math.pow(centerx - mouse.x, 2) + Math.pow(centery - mouse.y, 2));

Answer 2

@EmeraldWeapon为您提供了一种将圆线与十字准线对齐的迂回方式。执行此操作的更简单修改是更正radius变量中的拼写错误。

var radius = Math.sqrt(Math.pow(self.startDragPos.x - mouse.x, 2) + Math.pow(self.startDragPos.y - mouse.x, 2))/2;

应该是

var radius = Math.sqrt(Math.pow(self.startDragPos.x - mouse.x, 2) + Math.pow(self.startDragPos.y - mouse.y, 2))/2;

但是，@ EmeraldWeapon的解决方案比简单纠正错字更有效。

这是一个棘手的部分，它不会将圆圈的顶部/底部和左/右对齐到十字准线，它会使十字准线标记出准确的位置。圆圈线。

要获得顶部/底部和左/右对齐是比较棘手的，此刻就让我失望了。至少，这将使得绘制圆圈更具可预测性。

Answer 3

该公式看起来是正确的，但有一个拼写错误：Math.pow(self.startDragPos.y - mouse.x, 2)应该是Math.pow(self.startDragPos.y - mouse.y, 2)不是吗？

var centerx = self.startDragPos.x + (mouse.x-self.startDragPos.x)/2;
var centery = self.startDragPos.y + (mouse.y-self.startDragPos.y)/2;
var radius = Math.min(Math.abs(self.startDragPos.x - mouse.x), Math.abs(self.startDragPos.y - mouse.y))/2;

ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);

Answer 4

作为连续逼近模糊陈述目标的另一种变体尝试：

var centerx = (mouse.x+startDragPos.x)/2;
var centery = (mouse.y+startDragPos.y)/2;
var radius = Math.min(Math.abs(startDragPos.x - mouse.x), Math.abs(startDragPos.y - mouse.y))/2;

它采用由相对顶点startDragpos.(x,y)和mouse.(x,y)定义的矩形，并绘制仍在矩形内的最大居中圆。

圈子和画布和数学，哦我的

4 个答案: