Edit mode:
Grid:
Snap
Right Click the yellow square to save the current canvas as an image.
Controls Points
- The green circle on the curve indicates the start of the curve; it is assigned a value of zero percent.
- The red circle on the curve indicates the end of the curve; it is assigned a value of 100%.
- The darker green and red circles are the bezier control points which alter the shape of the curve.
Movement
- Hold the mouse button down on any of the control points to drag that point around.
- Use shift-mousedown on any control point to move the entire curve. The shift-mousedown is a bit sluggish (the code needs improving), so it would be better to uncheck the "snap" option in the builder tab.
Using the PathSlider
- The grip (aka handle) on the curve can be moved at any time by holding the mouse button down on it.
- Pick from any of the presets to get the feel of how the slider works; or manually change the points.
- The canvas coordinate system has the origin (0,0) in the upper left corner. X & Y values increase as you move down and right (The Y value behaves opposite of the cartesian coordinate system).
- Given the following points "25,150, 50,-50, -50,-50, 275,150", they can be represented by the following abbreviations: "sx,sy, csxo,csyo, cexo,ceyo, ex,ey"
- sx, sy: The X & Y coordinates of the starting point of the curve (light green center). It has the percent value of zero.
- csxo, csyo: The X & Y offset of the control point for the curve start (dark green center). This value is added to the starting X & Y values. The offset was used to make the points easier to understand and/or read.
- cexo, ceyo: The X & Y offset of the control point for the curve end (dark red center). This value is added to the end X & Y values.
- ex, ey: The X & Y coordinates of the end point of the curve (light red center). It has a value of 100%.
- If the grip jumps around a bit too much, try reducing the tolerance and/or range settings.