html5画布将线条更改为圆圈

Question

我想绘制一个矩形/正方形，我希望如果我拖动那个矩形的任何一边，那么矩形的那一边应该变成圆形，如第一张图片所示。
我设法使用二次曲线绘制一个带有可拉伸边的矩形/正方形，但问题是，当我拉伸矩形的一边时，它不会像圆形那样拉伸，而是像第二张图像中所示的椭圆或其他东西。登记/> 我知道你可能会建议使用贝塞尔曲线，但我想要像Quadratic Curve这样的单控制点，但bezier有两个（如果我错了，请纠正我）。

请建议我应该采用什么方法解决这个问题。

图片 - 我想要的内容

图片 - 我取得的成就

我做了什么
这fiddle显示了我工作的结果 要绘制矩形，只需单击并拖动您的maouse在画布上。

Here is the code

Answer 1

贝塞尔曲线的阶数越高，所需的控制点就越多。二次曲线是二阶贝塞尔曲线，它们需要一个控制点。具有两个控制点的贝塞尔曲线是三阶曲线。第一阶的贝塞尔曲线实际上是一条直线。贝塞尔曲线的有限阶不能形成完美的圆弧。

顺便说一句，二次曲线不是“椭圆或其他东西”，它是一个抛物线段。

如果你想要圆弧，你应该使用......好圆弧！要控制它，你需要改变半径，实际上你可以通过移动圆心来实现。

您需要额外的逻辑来处理直线，因为圆弧永远不是直线。因此，如果拖动点在直线上，您将绘制一条线，否则您将绘制具有适当半径的弧。

所以，假设你有以下情况：

段ab是矩形的直线，acb是所需的弧。 y是细分的高度，x是拖动的水平偏移。我们正在寻找由r，a和c三个点定义的圆的半径b。

现在角度sda是转弯/ 4，sd是r - x而ad是y / 2。如果我们使用毕达哥拉斯'，我们得到：

r^2 = (r-x)^2 + (y/2)^2
=>
r^2 = (r-x)(r-x) + (y/2)^2
=>
r^2 = r^2 - 2rx + x^2 + (y/2)^2
=>
r^2 = r^2 - 2rx + x^2 + (y^2/4)
=>
0 = - 2rx + x^2 + (y^2/4)
=>
2rx = x^2 + (y^2/4)
=>
r = (x^2 + (y^2/4)) / 2x
=>
r = ((x^2) / 2x) + ((y^2/4) / 2x)
=>
r = (x/2) + ((y^2/4) / 2x)
=>
r = (x/2) + (y^2/8x)

正如您所看到的，当x为0时，我们除以0.这就是为什么在发生这种情况时你必须切换到绘制直线。

我们找到的公式（r = (x/2) + (y^2/8x)）您将能够确定绘制圆弧的圆的半径。找到中心点是微不足道的......

要找到角度，您可以根据自己的喜好使用正弦定律或余弦定律，两者都能正常工作。您可以选择使用三角形asb，三角形asd或三角形adc（绿色）来查找角度。

对于一个简单的方法，让我们继续使用三角形asd，让我们使用正弦律：

r / sin(turn/4) = (y/2) / sin(θ/2)

由于四分之一圈的正弦值为1，我们可以替换它：

=>
r / 1 = (y/2) / sin(θ/2)
=>
1 = (y/2) / sin(θ/2)

现在，解决它的角度：

=>
sin(θ/2) = (y/2)
=>
θ/2 = asin(y/2)

调用绘制弧的函数时，起始角度为-θ/ 2，结束角度为θ/ 2.

注意：所有这些都是针对其他方需要进行矩形调整的右侧。