Shape
Shape is a type of Node that implements IDrawable and IPrimitive. It can be added to Groups.
| Attributes | Description |
|---|---|
| visible | Whether the node is visible (default: true) |
| listening | Whether the node is listening for events (default: true) |
| fillColor | Fill color |
| fillGradient | Gradient used to fill the shape (or lines), i.e. RadialGradient, LinearGradient or PatternGradient |
| alpha | Opacity (default: 1.0) |
| strokeColor | Stroke color (default: "black") |
| strokeWidth | Stroke width (default: 1) |
| dashArray | DashArray of numbers describing the on and off dash segments |
| dashOffset | Distance before DashArray takes effect |
| lineJoin | Defines how the connections of the stroke segments will be drawn |
| miterLimit | Maximum length of mitered corners |
| lineCap | Defines how the ends of the stroke will be drawn |
| shadow | Draws a shadow under the shape |
| draggable | Whether the node can be dragged (default: false) |
| dragConstraint | Whether the node can be dragged HORIZONTAL, VERTICAL or in BOTH directions |
| dragBounds | Restricts the (rectangular) region that a node can be dragged inside of |
| dragMode | If the dragging happens in the Shapes Layer or the Drag Layer (SAME_LAYER or DRAG_LAYER) |
And these attributes define the location and geometry of the Shape:
| Attributes | Description |
|---|---|
| x | X position |
| y | Y position |
| rotation | Rotation (in radians) |
| scale | Scale (sx, sy) |
| shear | Shear factors (shx, shy) |
| offset | Rotation offset (dx,dy) from shape origin |
See Node Attributes and Shape Transformations for details.
Circle is a Shape with a radius. Its center point is initially at (0,0) which is relative to its parent's coordinate system.
| Attributes | Description |
|---|---|
| radius | Radius of the Circle |
Basic Node Attributes
Circle Javadoc
Rectangle has a width and a height. The top-left corner is initially at (0,0).
Rectangle can have rounded corners by specifying a cornerRadius.
| Attributes | Description |
|---|---|
| width | Width of the Rectangle |
| height | Height of the Rectangle |
| cornerRadius | (optional) Radius of the rounded corners |
Basic Node Attributes
Rectangle Javadoc
Rounded Corner Rectangle demo.
Line is a (single) straight line segment between two points.
| Attributes | Description |
|---|---|
| points | two points |
Basic Node Attributes
Line Javadoc
A Text node displays a Text string.
See Web Fonts for how to draw strings with web fonts.
| Attributes | Description |
|---|---|
| text | The text string that will be displayed. |
| textSize | Text size in "points". E.g. if the value is 12, the value will be "12pt". Default: 48. |
| fontStyle | Combines the following CSS font properties: font-style, font-weight and font-variant. Multiple values can be concatenated, separated with spaces. Here are some examples: "normal", "italic", "bold", "italic bold", "oblique", "oblique bold" Default: "normal" |
| fontFamily | One or more font families can be defined, separated by commas, e.g. "Verdana, serif". Default: "Helvetica" |
| textAlign |
Defines the horizontal alignment of the Text node relative to its (x,y) location.
TextAlign Javadoc: CENTER, END, LEFT, RIGHT, START (default)
Horizontal Alignment demo.
|
| textBaseline |
Defines the vertical alignment of the Text node relative to its (x,y) location.
TextBaseline Javadoc: ALPHABETIC (default), BOTTOM, HANGING, IDEOGRAPHIC, MIDDLE, TOP
Vertical Text Alignment demo.
|
Basic Node Attributes
Text Javadoc
Fonts demo
Web Fonts
The Text.measure(String) method returns the width and height of the specified String in pixels.
Measure Text demo
Text Around Arc demo
TextMetrics Javadoc
Arcs are defined by a radius, a start angle, an end angle and a drawing direction (either clockwise or counterclockwise). The center of the circle is initially at (0,0). The angles are specified in radians. In the example below, the drawing direction is clockwise from the start angle α to the end angle β.
| Attributes | Description |
|---|---|
| radius | Radius of the circle that the Arc is part of |
| startAngle | Start angle of the Arc |
| endAngle | End angle of the Arc |
| counterClockwise | Whether the Arc is drawn clockwise (false) or counter clockwise (true) |
Basic Node Attributes
Arc Javadoc
Slices are defined similar to Arcs, but they are partially filled. Great for making pie charts or pacman.
| Attributes | Description |
|---|---|
| radius | Radius of the circle that the arc is part of |
| startAngle | Start angle of the arc |
| endAngle | End angle of the arc |
| counterClockwise | Whether the arc is drawn clockwise (false) or counter clockwise (true) |
Basic Node Attributes
Slice Javadoc
Bows are defined by an inner radius, outer radius, a start angle, an end angle and a drawing direction (either clockwise or counterclockwise). The center of the bow is initially at (0,0). The angles are specified in radians.
| Attributes | Description |
|---|---|
| innerRadius | Inner radius of the Bows arc |
| outerRadius | Outer radius of the Bows arc |
| startAngle | Start angle of the Bows arc |
| endAngle | End angle of the Bows arc |
| counterClockwise | Whether the Bows arc is drawn clockwise (false) or counter clockwise (true) |
Basic Node Attributes
Arc Javadoc
Rings are defined by an inner radius and outer radius. The center of the Ring is initially at (0,0).
| Attributes | Description |
|---|---|
| innerRadius | Inner radius of the Ring |
| outerRadius | Outer radius of the Ring |
Basic Node Attributes
Arc Javadoc
An Ellipse is defined by a width and a height. The center is initially at (0,0).
| Attributes | Description |
|---|---|
| width | Width of the Ellipse |
| height | Height of the Ellipse |
Basic Node Attributes
Ellipse Javadoc
A PolyLine is a continuous line composed of one or more straight line segments.
| Attributes | Description |
|---|---|
| points | Two or more points |
Basic Node Attributes
PolyLine Javadoc
A Polygon is a plane figure that is bounded by a closed path, composed of a finite sequence of straight line segments.
| Attributes | Description |
|---|---|
| points | Three or more points |
Basic Node Attributes
Polygon Javadoc
A Triangle is a Polygon with three sides.
| Attributes | Description |
|---|---|
| points | Three points |
Basic Node Attributes
Triangle Javadoc
A QuadraticCurve is a Bézier curve defined by a context point (P0), a control point (P1) and an end point (P2).
| Attributes | Description |
|---|---|
| points | Three points (P0, P1, P2) |
Basic Node Attributes
QuadraticCurve Javadoc
A BezierCurve is a cubic Bézier curve defined by two anchor points (or end points, i.e. A and D in the example below) and two control points (B and C.)
| Attributes | Description |
|---|---|
| points | Four points (A, B, C, D) |
Basic Node Attributes
BezierCurve Javadoc
A Spline is a Cubic Hermite spline defined by three or more points. This implementation is a Catmull-rom spline
| Attributes | Description |
|---|---|
| points | points on spline |
| curveFactor | defines how curvy the spline is as it joins segments |
| angleFactor | defines the join angle acuity as it joins segments |
Basic Node Attributes
BezierCurve Javadoc
A RegularPolygon is defined by a radius and the number of sides. The center is initially at (0,0).
The lineJoin attribute defines how the connections of the line segments will be drawn.
| Attributes | Description |
|---|---|
| radius | Radius of the (outer) circle |
| sides | The number of sides (greater than 2) |
Basic Node Attributes
RegularPolygon Javadoc
A Star is defined by an inner radius, an outer radius and the number of points. The center is initially at (0,0).
| Attributes | Description |
|---|---|
| innerRadius | Inner radius |
| outRadius | Outer radius |
| starPoints | The number of points |
Basic Node Attributes
Star Javadoc
A Parallelogram a type of polygon is defined by a width, a height and a skew factor. A skew factor of 0 draws sides that form a 90 degree angle, resulting in a rectangle.
| Attributes | Description |
|---|---|
| width | Width of the Parallelogram |
| height | Height of Parallelogram |
| skew | Skew factor |
Basic Node Attributes
Parallelogram Javadoc
An Arrow a type of polygon, defined by the following attributes:
| Attribute | Description |
|---|---|
| startPoint | Start of the arrow |
| endPoint | Tip of the arrow |
| baseWidth | Width of the base (shaft) of the arrow |
| headWidth | Width of the arrow head (at the widest point) |
| arrowAngle | Angle between the midline and the outer diagonal |
| baseAngle | Angle between the outer diagonal and the inner diagonal |
| arrowType |
Whether the arrow head is AT_END (regular arrow), AT_START or AT_BOTH_ENDS. If the arrowType is AT_END_TAPERED and AT_START_TAPERED, then the start of the arrow is pointy, rather than flat. |
|
|
| arrowType is AT_END | arrowType is AT_END_TAPERED |
Arrows demo
Arrow Attributes demo
Arrow Javadoc
Picture wraps an HTML image. See Picture for details.
Movie wraps a video. See Movie for details.