A cubic Bezier component with interactive control points. When the user moves a point, the component creates a lookup table for the new curve and passes it to props.onChange.
The lookup table is a standard js array of numbers representing the (approximate) height of the curve at regular intervals across the x axis of the graph. The default lookup resolution is 64 entries.
The graph area spans from (0, 0) in the bottom left to (1, 1) in the top right.
| point | x | y | default |
|---|---|---|---|
| P0 | 0 | 0 to 1 | (0, 0) |
| P1 | 0 to 1 | 0 to 1 | (0, 1) |
| P2 | 0 to 1 | 0 to 1 | (1, 0) |
| P3 | 1 | 0 to 1 | (1, 1) |
| name | type | description |
|---|---|---|
resolution |
number | length of the lookup array |
onChange |
function | handler to call on control point change; also called once after initial render |
points |
array | initial control points in the format [ x0, y0, x1, y1, x2, y2, x3, y3 ] |
labelToplabelXlabelY |
string | graph labels |