Shape

From Emitrom

Jump to: navigation, search

Back to Index

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

Hand-point.png 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

Hand-point.png Basic Node Attributes Hand-point.png 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

Hand-point.png Basic Node Attributes Hand-point.png Rectangle Javadoc Hand-point.png 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 Hand-point.png 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

Hand-point.png Basic Node Attributes Hand-point.png Line Javadoc

Text

A Text node displays a Text string. Hand-point.png 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.

Hand-point.png TextAlign Javadoc: CENTER, END, LEFT, RIGHT, START (default)

Hand-point.png Horizontal Alignment demo.

textBaseline Defines the vertical alignment of the Text node relative to its (x,y) location.

Hand-point.png TextBaseline Javadoc: ALPHABETIC (default), BOTTOM, HANGING, IDEOGRAPHIC, MIDDLE, TOP

Hand-point.png Vertical Text Alignment demo.

Hand-point.png Basic Node Attributes Hand-point.png Text Javadoc Hand-point.png Fonts demo Hand-point.png Web Fonts

TextMetrics

The Text.measure(String) method returns the width and height of the specified String in pixels.

Hand-point.png Measure Text demo Hand-point.png Text Around Arc demo Hand-point.png TextMetrics Javadoc

Arc

Start and end angles are measured clockwise from the positive X-axis

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

Arc.jpg

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)

Hand-point.png Basic Node Attributes Hand-point.png Arc Javadoc

Slice

Slices are defined similar to Arcs, but they are partially filled. Great for making pie charts or pacman.

Pizza.jpg Pacman.jpg

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)

Hand-point.png Basic Node Attributes Hand-point.png Slice Javadoc

Ellipse

An Ellipse is defined by a width and a height. The center is initially at (0,0).

Ellipse.png

Attributes Description
width Width of the Ellipse
height Height of the Ellipse

Hand-point.png Basic Node Attributes Hand-point.png 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 Hand-point.png 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

Hand-point.png Basic Node Attributes Hand-point.png 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

Hand-point.png Basic Node Attributes Hand-point.png 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

Hand-point.png Basic Node Attributes Hand-point.png 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).

QuadraticCurve.jpg

Attributes Description
points Three points (P0, P1, P2)

Hand-point.png Basic Node Attributes Hand-point.png 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.)

BezierCurve.jpg

Attributes Description
points Four points (A, B, C, D)

Hand-point.png Basic Node Attributes Hand-point.png 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.

RegularPolygon.png

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

Hand-point.png Basic Node Attributes Hand-point.png 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.

Star Radii.png

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

Hand-point.png Basic Node Attributes Hand-point.png 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

Hand-point.png Basic Node Attributes Hand-point.png 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
Arrow.png TaperedArrow.png
arrowType is AT_END arrowType is AT_END_TAPERED

Hand-point.png Arrows demo Hand-point.png Arrow Attributes demo Hand-point.png Arrow Javadoc

Picture

Picture wraps an HTML image. See Picture for details.

Hand-point.png Picture Javadoc

Movie

Movie wraps a video. See Movie for details.

Hand-point.png Movie Javadoc

Retrieved from "http://wiki.emitrom.com/wiki/index.php/Shape"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox