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

Question

I need to implement connections in the form of curved lines in C# (Unity). I would like to get the result as similar as possible to the implementation in Miro.com (see screenshot).

After attaching the curve, I calculate the path of the cubic Bezier curve. For this first segment, the anchor points and offsets from the objects it connects are used. There are no problems at this stage.

Problem : When dividing the curve into segments by clicking and dragging one of the blue points of the segment (see screenshot), it is split in two in the middle. At the junction of two new curves, a new interactive (movable) point is formed for which the tangent and coordinates of the control points are unknown. I need to find the position of these control points every time the position of the interactive points changes (white points in the picture below). Moreover, the curve should not drastically change its position when dividing, not form loops, have different lengths of control point vectors (I'm not sure here) and behave as adequately as possible (like on the board in Miro).

By control points I mean 2 invisible guide points for the Bezier segment.

In black I painted the known control points, and in red those that I need to find. (Pn - interactive points, Cn - control points)

The algorithms I have tried to find them give incorrect distances and directions of control points.

The following algorithms were tested:

1. Interpolation from Tacent - jumps of the curve when separating, inappropriate direction and amount of indentation of control points;
2. Chaikin's algorithm - curve jumps during separation, creates loops;
3. "Custom" interpolation based on guesses (takes into account the distance to the center of the segment between the start and end points of the segment, as well as the direction between the start and end points) - has all the same problems, but looks slightly better than those above.

I suspect the solution is to chordally interpolate the points using a Catmull-Rom spline and translate the result to points for a Bezier curve. However, there are still problems with implementation.

The curves from 3DMax also look very similar. In their documentation, I found only a mention of the parametric curve.

Methods that I did not use (or did not work):

1. Catmull-Rom interpolation;
2. B-spline interpolation;
3. Hermitian interpolation;
4. De Casteljau's algorithm (although it seems not for this)

I would be immensely grateful for any help, but I ask for as much detail as possible.

Answer 1

Find helpful sources to understand bezier curves here and here .

To do what you want, I would give a try to the Catmull-Rom approach which I believe is much more simple than Bezier's, which is the one used in theitween asset, that is free, and you got plenty of funtionality implemented.

If you want to stick to the bezier curves and finding the control points, I will tell you what I would do to find them.

For the case of 2 control point bezier curve:

P = (1-t)P1 + tP2

To get to know the control points P1(x1,y1) and P2(x2,y2), you need to apply the equation in a known point of your curve. Take into account that the 2D equation is vectorial, so each points provides 2 equations one for x and one for y, and you got 4 unknows, x and y for each point.

So for the first node of the curve (t=0), you would have:

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

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

For the last point (t=1)

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

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

With these 4 equations I would try to achieve the control points P1 and P2. You can do it with t=0 and t=1 which are the supposed points you know of your curve and the ones that simplify the math due to the t values, but you should be able to use any as long as you know the points coords in the curve for determined t.

If the curve is a 3 control point bezier, you would need 6 equations for the 3 control points and so on.

I think that the best approach is to compound the curve of cuadratic curves composition, and calculate the control points for each chunk, but I am not sure about this.

Once maths are understood and control points achieved, In case that was successful I would try to implement that in the code.