Drag the Bezier curve to edit it.

Question

You will understand what I mean if you use graphical editing programs like Gimp or Photoshop. To edit the curve of these programs (perhaps this is a Bezier curve), we can click on the curve, drag and drop, and the curve changes accordingly. I suspect that everything related to this mechanism is related to vectors, but I could not find a single document that mentions how to do this. Can someone tell me how can I do this? Many thanks.

[edit] What I had in mind was to select my own curve to change (edit) it (click on the curve and drag the curve to edit it). In the usual way, we select control points for changing the curve. I know that in order to change a curve, I need to edit control points, but how to interpret a change in a curve in a change to a change in control points?

Answer 1

There are several ways to achieve what you see, depending on how you want him to behave. I will explain some of the simpler methods for modifying a Bezier curve through a curve manipulation point.

The first thing to do is find out the value of the parameter (t), where the user clicked on the curve. This will usually be an approximation. If you are performing pixel or subpixel rendering on a Bezier, then just write the value of t for each pixel and use it. If you are tessellating into line segments, look at which line segment is closest, find the t values ​​of the two endpoints, and say the value t according to the distance along the line.

Once you get the value of t, you can connect it to the equation of the Bezier curve. You will get something like a form:

P = k0*P0 + k1*P1 + k2*P2 + k3*P3 

where P is a point on the curve, P0, P1, P2 and P3 are input control points, k0, k1, k2 and k3 are constants for a given t. I will call the contribution "k", or, more specifically, the contribution of control points to a point on the curve P (t). A good property to remember is that k0 + k1 + k2 + k3 = 1.

So, let's say you have a vector V = P '- P, where P' is the new position and P is the starting position. We need to move some control points to get P 'where it is needed, but we have some flexibility regarding which of the control points we want to move. Any point with a nonzero contribution can be used or some combination.

Say the user clicks on the curve at t = 0. In this case, only k0 is nonzero, therefore

 P0 := P0 + V 

will lead to the correct result. It can also be written as

 P0 := P0 + k0 * V 

In the general case, when all contributions are nonzero, you can apply the same transformation to each of the points, which will have the effect of a very smooth, stretched deformation.

Another option is to simply move the control point with the maximum contribution over the entire distance. I think the equation used would be something like

 Pmax := Pmax + 1/kmax * V 

but in any case, it comes down to considering the contributions at a given value of t and moving the control points so that the new point is in the right place.

This approach is pretty general and works for NURBS and most other splines, even surfaces. There is another method that is quite common when using Greville Abscissae, which connects as many points as possible, but, in my experience, it is too easy to get vibrations.

Answer 2

EDIT - In response to editing a question

To be able to choose a curve for moving control points, I would suggest that the Bezier curves are definitely not forward - you will need to solve the equation in the opposite direction to find the correct points of the control point, you will also find that in some cases It’s impossible to move control points so that the curve goes where you want.

If you used B-Splines, you can simply insert a new breakpoint at the point on the curve closest to the click, and then move the new breakpoint. That way you would add a new breakpoint.

Source text

Assuming you already have an implementation of a Bezier curve that, given the set of control points (usually three for Bezier, but can be as large as possible), can create a set of points that should be connected to the lines on the display device (usually you use a parametric equation 0 >= u <= 1 ), then this is easy.

Your control points determine where the curve goes, so you just need to implement selection feedback and drag / drop these control points.

If you are looking for exact match of the points, the bezier curves are not perfect, because they pass only through the first and last control points. And the more points you add to the curve, the less accurate they become.

B-splines would be better, and their variations are what you really see in photoshop and others.

Answer 3

Dragging just changes the control points of the Bezier curve, and the curve is recalculated accordingly. See Wikipedia for a good explanation of how they work.

Answer 4

Please specify what you want to do? Do you want to edit Bezier curves in the application? Are you interested in general math for this?

You typically control the control points that are used to generate the Bezier curve.

Answer 5

OK, so suppose you need to use Bezier curves because you are using a rendering library that has them as a primitive. If you are absolutely married to the idea of ​​using breakpoints on the curve itself, you can simply interpolate breakpoints using the method described here: How to find breakpoints for the BezierSegment of a given Start, End, and 2 Intersection Pts in C # - 4-point AKA interpolation Cubic bezier

In other words, for each set of 4 points on the curve, you must follow the algorithm described above and get 4 control points needed to draw a cubic bezier.

Answer 6

See github.com/bootchk/freehandTool for object models

User drags. Project a drag to the closest control point or lever between the control points. Interpret drag and drop as a rotation and / or translation (transformation) of the specified nearest control points. Note: several nearest ones may be coincident control points (ends) of two segments or control points of a shoulder of a bezier segment.