如何找到贝塞尔曲线的控制点？

Question

我需要在C#（Unity）中实现曲线连接。 我希望结果尽可能与Miro.com的实现相似（请参见屏幕截图）。将曲线附加后，我计算立方贝塞尔曲线的路径。对于这个第一段，使用连接对象的锚点和偏移量。在此阶段没有问题。

问题：通过单击并拖动段的蓝色点之一将曲线分成多个部分时（请参见屏幕截图），它会在中间分成两部分。在两个新曲线的交界处，形成一个新的交互式（可移动）点，其切线和控制点的坐标未知。每次交互点的位置发生变化时，我需要找到这些控制点的位置（下图中的白点）。此外，曲线在分割时不应大幅改变其位置，不应形成循环，控制点向量的长度应不同（我在这里不确定），并且应尽可能地表现得像Miro上的板子。

通过控制点，我指的是贝塞尔段的2个不可见引导点。

我用黑色标出了已知的控制点，红色标出了需要找到的控制点。(Pn-交互式点，Cn-控制点) 我尝试过的算法无法正确计算控制点的距离和方向。

下面是测试过的算法：

1. 从Tacent插值——分离时曲线跳跃，控制点的缩进方向和数量不当;
2. Chaikin算法——分离时曲线跳跃，会产生循环;
3. "自定义"插值基于猜测(考虑到起点和终点之间线段的中心距离以及起点和终点之间的方向)——所有问题都一样，但比上述算法看起来略好。

我怀疑解决方案是使用Catmull-Rom样条插值来进行和弦插值，并将结果转换为Bezier曲线的点。但是，实现上仍然存在问题。

从3DMax中得到的曲线看起来也非常相似。在他们的文档中，我只找到了对参数曲线的提及。

我没有使用的方法（或者没有起作用的方法）：

1. 卡特穆勒-罗姆插值；
2. B样条插值；
3. 埃尔米特插值；
4. De Casteljau算法（虽然它似乎不适用于这个问题）

我将非常感激任何帮助，但我要求尽可能详细。

- g0dzZz1lla

---

@MickyD 我的意思是一个三次曲线，我在用一种外语表述得不好。我试着修正了描述。 - g0dzZz1lla

先生，非常感谢您的澄清，没关系。很抱歉我投票关闭了您的问题。我已经投票“重新开放”。请等待其他人的投票，如果没有成功，请随时再次发布您的问题，并根据需要进行任何其他澄清。也许可以发布实际图像或屏幕截图的链接。作为新贡献者，您将无法实际查看图片，但其他人会为您编辑您的问题，以便我们可以查看。祝你好运！ :) - user585968

@g0dzZz1lla请发布您的代码和结果，以便问题可以重新打开。 - Soleil

Answer 1

找到有用的资源来了解贝塞尔曲线在这里和在这里。

如果想要做你想做的事情，我会尝试Catmull-Rom方法，我相信这比贝塞尔曲线更简单，后者是itween资产中使用的一种，它是免费的，您可以实现很多功能。

如果您想坚持使用贝塞尔曲线并找到控制点，我将告诉您我如何找到它们。

对于两个控制点贝塞尔曲线的情况：

P = (1-t)P1 + tP2

为了知道控制点P1(x1,y1)和P2(x2,y2)，您需要将方程应用于您的曲线已知点。请注意，2D方程式是向量的，因此每个点提供2个方程式，一个用于x，另一个用于y，并且您获得4个未知数，即每个点的x和y。

对于曲线的第一个节点（t=0），您将有：

Px = (1-0)P1x + 0*P2x

Py = (1-0)P1y + 0*P2y

对于最后一个点（t=1）

Px = (1-1)P1x + 1*P2x

Py = (1-1)P1y + 1*P2y

通过这4个方程，我会尝试实现控制点P1和P2。您可以使用t=0和t=1，这是您所知道的曲线上的假定点，并且由于t值而简化了数学计算，但只要您知道确定t时曲线上的点坐标，就应该能够使用任何点。

如果曲线是3个控制点的贝塞尔曲线，则需要6个方程来确定3个控制点，以此类推。

我认为最好的方法是将曲线组合成二次曲线组合，并计算每个块的控制点，但我不确定。

一旦理解了数学原理并获得了控制点，如果成功的话，我会尝试在代码中实现它。

- rustyBucketBay

---

对于第一段，我使用以下公式： P = (1 − t)^3P1 + 3(1 − t)^2tP2 +3*(1 − t)t^2P3 + t^3*P4 我已经查看了这些链接，但我认为这些信息对我来说不够。 事实证明，在线的第一段中，我不知道P3的值，最后一个点是P2，而中间则是P2和P3。 - g0dzZz1lla