a PaintCode - Dynamic Béziers

Dynamic Béziers

For simple shapes such as rectangles and ovals, it is sufficient to specify their resizing behavior with the resizing constraints. However, you need a finer control for béziers.

Configuring a dynamic bézier

The differences are:

Since control points do not have width and height, the constraints control is simpler:

Control Point Constraints Control

You have 4 constraints: left, right, top, bottom. Each of them can be either rigid or flexible.

When the left constraint is rigid, the control point will maintain a constant distance from the left side of its reference frame. Analogously, when the right constraint is rigid, the control point will maintain a constant distance from the right side of its reference frame.

When both left and right constraints are flexible, the control point maintains the same relative position inside the reference frame. For example, imagine the frame is 300 pixels wide and the control point is 100 pixels from the left side of the frame. When you resize the frame to be 600 pixels wide, the control point will be 200 pixels from the left side of the frame.

It is not possible to have both left and right constraints rigid.

It is possible to achieve complex resizing behavior by setting resizing constraints for individual control points. Moreover, since you can use multiple (or even nested) frames, creating many interesting behaviors is simple.

Another dynamic bézier example