Drag a bezier curve to edit it

Question

You will understand what I mean if you use graphic editing programs like Gimp or Photoshop. To edit a curve on those programs (which probably is Bezier Curve), we can click on the curve, drag the mouse and the curve is changed accordingly. I suspect all the things behind this mechanism are concerned with vectors, but I couldn't find any document mentioning how to do it. Could anybody tell me how I can do that? Thank you very much.

[edit] What I meant was to select-the-curve itself to change (edit) it (click on the curve, and drag the curve to edit it). In the usual way, we select the control points to change the curve. I know to change the curve, I need to edit the control points, but how do I interpret a change on a curve into a change into a change to control points?

Answer 1

There are a number of ways of accomplishing what you're seeing, depending on how you'd like it to behave. I'll explain some of the simpler methods of modifying a Bezier curve via point on curve manipulation.

The first thing to do is figure out the parameter value (t) where the user clicked on the curve. This is generally going to be an approximation. If you're doing pixel or sub-pixel rendering of the Bezier, then just record for every pixel what the t value was and use that. If you're tessellating into line segments, see which line segment is closest, find the t values of the two end points, and lerp the t value according to the distance along the line.

Once you have the t value, you can plug it into the Bezier curve equation. You'll end up with something of the form:

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

where P is the point on the curve, P0, P1, P2, and P3 are the input control points, and k0, k1, k2, and k3 are constants for a given t. I'll call the k values 'contributions', or more specifically the contributions of control points to the point on the curve P(t). A nice 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 original position. We need to move some of the control points to get P' where it needs to go, but we have some flexibility about which of the control points we want to move. Any point with non-zero contribution can be used, or some combination.

Let's say the user clicks on the curve at t=0. In this case, only k0 is non-zero, so

P0 := P0 + V

will produce the correct result. This can also be written as

P0 := P0 + k0 * V

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

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

Pmax := Pmax + 1/kmax * V

but either way it boils down to looking at the contributions at a given t value, and moving the control points so the new point lies in the desired location.

This approach is fairly general, and works for NURBS and most other splines, even surfaces. There is another method that's fairly common that uses Greville Abscissae, which pins as many points as possible, but in my experience it's too easy to get oscillation.

Answer 2

EDIT - In response to your question edit

In order to be able to select the curve itself to move the control points, I would suggest that Bezier curves are definitely not the way forward - you would have to solve the equation in reverse in order to find the right control point locations. You would also find that in some cases it's actually not possible to move the control points to make the curve go where you want.

If you were using B-Splines, then you could simply insert a new control point at the point on the curve closest to where the user has clicked, and then move the new control point. So, effectively, you'd be adding a new control point.

Original text

Assuming you already have an implementation of a bezier curve which, given a set of control points (typically three for Bezier but can be as many as you want) can produce a set of points to be joined with lines on the display device (typically you use the 0 >= u <= 1 parametric equation), then this is easy.

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

If you're looking for exact point matching, however, bezier curves are not ideal since they only pass 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 variations of these are what you actually see in photoshop et al.