我想绘制一个矩形/正方形，并且我希望如果我拖动该矩形的任何一侧，那么矩形的该一侧应更改为圆形，如第一张图像所示。
我设法使用二次曲线绘制了一个具有可拉伸边的矩形/正方形，但问题是当我拉伸矩形的边时，它不会拉伸为圆形，而是拉伸为椭圆或第二张图像中所示的东西。
我知道您可能会推荐使用贝塞尔曲线，但我想要像二次曲线这样的单个控制点，但贝塞尔曲线有两个（如果我错了，请纠正我）。
请建议我解决这个问题的最佳方法是什么。
图片 - 我想要的
图片 - 我所取得的成就
我做了什么
这fiddle显示了我的工作成果。
要绘制矩形，只需在画布上单击并拖动鼠标即可。
贝塞尔曲线的阶数越高，需要的控制点就越多。二次曲线是二阶贝塞尔曲线，它们需要一个控制点。具有两个控制点的贝塞尔曲线是三阶的。一阶贝塞尔曲线实际上是一条直线。没有有限阶的贝塞尔曲线可以形成完美的圆弧。
顺便说一句，二次曲线不是“椭圆或其他东西”，而是抛物线段。
如果你想有圆弧，你应该使用......好吧圆弧！要控制它，您需要更改半径，实际上您可以通过移动圆心来实现。
您将需要额外的逻辑来处理直线，因为圆弧永远不是直线。因此，如果拖动点在直线上方，您将绘制一条线，否则您将绘制具有适当半径的圆弧。
因此，假设您有以下情况：
线段ab是矩形的直线并且acb是所需的弧线。y是段的高度，x是拖动的水平偏移量。我们正在寻找由三个点和定义的圆的r半径。acb
现在角度sda是转角/4，sdisr - x和adis 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。
注意：所有这些都是为矩形的右侧进行的，其他边需要调整。