# Shape

### From Emitrom

Shape is a type of Node that implements IDrawable and IPrimitive. It can be added to Groups.

## Contents |

# Shape Attributes

Attributes | Description |
---|---|

visible | Whether the node is visible (default: true) |

listening | Whether the node is listening for events (default: false) |

fillColor | Fill color |

fillGradient | Gradient used to fill the shape (or lines), i.e. RadialGradient, LinearGradient or PatternGradient |

alpha | Opacity |

strokeColor | Stroke color |

strokeWidth | Stroke width (default: 1) |

shadow | Draws a shadow under the shape |

draggable | Whether the node can be dragged |

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 |

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 | Translation offset (dx,dy) |

transform | Affine transformation |

See Node Attributes and Shape Transformations for details.

# Shape Types

## Circle

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

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

Line is a (single) straight line segment between two points. See also PolyLine.

To create a dashed Line, use one of the setDashArray methods. See Dashed Lines demo.

Attributes | Description |
---|---|

points | two points |

dashArray | (optional) For dashed lines |

lineJoin | (optional) Defines how the connections of the line segments will be drawn |

miterLimit | (optional) Maximum length of mitered corners |

lineCap | (optional) Defines how the ends of the Line will be drawn |

Basic Node Attributes Line Javadoc

## Text

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".
Web Fonts are supported and can be loaded with the WebFontsLoader. Default: "Verdana" |

textAlign | Defines the horizontal alignment of the Text node relative to its (x,y) location.
TextAlign Javadoc: CENTER, END, LEFT, RIGHT, START (default) |

textBaseline | Defines the vertical alignment of the Text node relative to its (x,y) location.
TextBaseline Javadoc: ALPHABETIC (default), BOTTOM, HANGING, IDEOGRAPHIC, MIDDLE, TOP |

Basic Node Attributes Text Javadoc Fonts demo Web Fonts

### TextMetrics

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

## Arc

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

## Slice

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

## Ellipse

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

## PolyLine

A PolyLine is a continuous line composed of one or more straight line segments.

To create a dashed PolyLine, use one of the setDashArray() methods. See Dashed Lines demo.

Attributes | Description |
---|---|

points | Two or more points |

dashArray | (optional) For dashed lines |

lineJoin | (optional) Defines how the connections of the line segments will be drawn |

miterLimit | (optional) Maximum length of mitered corners |

lineCap | (optional) Defines how the ends of the PolyLine will be drawn |

Basic Node Attributes PolyLine Javadoc

## Polygon

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 |

lineJoin | (optional) Defines how the connections of the line segments will be drawn |

miterLimit | (optional) Maximum length of mitered corners |

Basic Node Attributes Polygon Javadoc

## Triangle

A Triangle is a Polygon with three sides.

Attributes | Description |
---|---|

points | Three points |

lineJoin | (optional) Defines how the connections of the line segments will be drawn |

miterLimit | (optional) Maximum length of mitered corners |

Basic Node Attributes Triangle Javadoc

## QuadraticCurve

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

## BezierCurve

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

## RegularPolygon

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) |

lineJoin | (optional) Defines how the connections of the line segments will be drawn |

miterLimit | (optional) Maximum length of mitered corners |

Basic Node Attributes RegularPolygon Javadoc

## Star

A Star is defined by an inner radius, an outer radius and the number of points. The center is initially at (0,0).

The lineJoin attribute defines how the connections of the line segments will be drawn.

Attributes | Description |
---|---|

innerRadius | Inner radius |

outRadius | Outer radius |

starPoints | The number of points |

lineJoin | (optional) Defines how the connections of the line segments will be drawn |

miterLimit | (optional) Maximum length of mitered corners |

Basic Node Attributes Star Javadoc

## Parallelogram

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 (if skew factor was 0) |

outRadius | Height of Parallelogram (if skew factor was 0) |

skew | Skew factor |

lineJoin | (optional) Defines how the connections of the line segments will be drawn |

miterLimit | (optional) Maximum length of mitered corners |

Basic Node Attributes Parallelogram Javadoc

## Arrow

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. |

lineJoin | (optional) Defines how the connections of the line segments will be drawn |

miterLimit | (optional) Maximum length of mitered corners |

arrowType is AT_END | arrowType is AT_END_TAPERED |

Arrows demo Arrow Attributes demo Arrow Javadoc

## Picture

Picture wraps an HTML image. See Picture for details.

## Movie

Movie wraps a video. See Movie for details.