If you are just starting out, see the Tour of Scenery
Scenery depends on a few other libraries, and needs to have them checked out as siblings. It is recommended to place all of these inside a containing directory. Make sure you have git installed, then run:
git clone https://github.com/phetsims/sherpa.git git clone https://github.com/phetsims/chipper.git git clone https://github.com/phetsims/perennial.git git clone https://github.com/phetsims/utterance-queue.git git clone https://github.com/phetsims/assert.git git clone https://github.com/phetsims/axon.git git clone https://github.com/phetsims/tandem.git git clone https://github.com/phetsims/phet-core.git git clone https://github.com/phetsims/dot.git git clone https://github.com/phetsims/kite.git git clone https://github.com/phetsims/scenery.git
For some examples and tests, and to build a custom version, you'll need to install node.js, and grunt-cli. Then,
cd chipper npm install cd ../scenery npm install grunt
You will now have the built files under build/, and all of the documentation/examples should work locally.
window.assertions.enableAssert();
window.assertions.enableAssertSlow();
or to disable assertions:
window.assertions.disableAssert();
window.assertions.disableAssertSlow();
See the User Input documentation for handling user-generated events.
See the layout documentation for information on handling layout containers, or our layout exemplars for working examples using sun components.
For information on Scenery's internal code, see the Implementation Notes.
A default node can be created with new phet.scenery.Node(), but usually a parameter object is
given, for example new phet.scenery.Node( { x: 20, y: 100 } ). Below are all of the available
parameter object options:
function( childNode, index ) Called when a child is added
or inserted, and includes the new index into the children.function( childNode, index ) Called when a child is removed
and includes the old index into the children.function() Called when the bounds in the parent coordinate frame changes.
See bounds.function() Called when the bounds in the local coordinate frame changes.
See localBounds.function() Called when the bounds of all children in the local coordinate
frame changes. See childBounds.function() Called when the self bounds change.
See selfBounds.function() Called when the transform changes.function() Called when the visibility changes.function() Called when the opacity changes.function() Called when the clipArea changes.
node.children is a getter/setter linked to node.getChildren() and node.setChildren( children ).
This will return a copy of node's array of children, in rendering
order (later children render above previous children). Making changes to the returned array will not change node's children.
This can also be used when creating a Node:
node.parents or node.getParents() will return an array of parent nodes, but order is not significant.
Appends childNode to node's list of children. childNode will be displayed above node and node's other children.
Inserts childNode into node's children at the specified index. node.insertChild( 0, childNode ) will make childNode the first
child, and
node.insertChild( node.children.length, childNode ) is the same as node.addChild( childNode ).
Removes childNode from node's children.
Removes the child node node.children[ index ] from node's children.
Removes all of the Node's children.
Removes this node from all of its parents.
node.cursor is a getter/setter linked to node.getCursor() and node.setCursor( cursor ).
By default it is null (default cursor), but this can be set to
the string for any CSS cursor value, and some extra Scenery-specified ones
below. There is
a cursor example page that demos a number of available cursors.
The cursor is updated whenever display.updateDisplay is called, and event initialization like display.initializeEvents should be added so Scenery can track the mouse input.
There are some Scenery-specific cursor values that can be set:
Sets an alternative hit region when receiving mouse events. Useful for when there are gaps between children which should still respond to the event.
Accepts both arbitrary shapes (Shape) and bounding boxes (Bounds2).
The mouse area supersedes the hit regions for mouse events of the node itself and its descendants. Setting mouseArea on a Node will cause it to either return no hit (for it or its children when outside of the mouseArea) or this Node as an event target.
Sets an alternative hit region when receiving touch events. Useful for expanding where the user can touch controls.
Accepts both arbitrary shapes (Shape) and bounding boxes (Bounds2).
The touch area supersedes the hit regions for touch events of the node itself and its descendants. Setting touchArea on a Node will cause it to either return no hit (for it or its children when outside of the touchArea) or this Node as an event target.
node.clipArea is a getter/setter linked to node.getClipArea() and node.setClipArea( shape ).
Default is null (no clipping), but when the clipArea is set to a Shape, anything outside
of the clip area Shape (in the node's local coordinate frame) is not displayed. This clipping affects both the node's own display, and the
display of any
of its children.
clipArea currently does not affect DOM layers, and the general case can't be added in (CSS clip only allows rectangles currently).
clipArea is not currently compatible with CSS-transformed SVG rendering if the clipArea is on an ancestor of the CSS-transformed Node.
clipArea affects the bounds of the Node, and pointers are not considered "over" a node if they are outside of its clipArea.
node.visible is a getter/setter linked to node.isVisible() and node.setVisible( boolean ).
Nodes are by default visible, but when invisible they will not
be displayed and will not be pickable (no input events will be targeted to them).
node.pickable is a getter/setter linked to node.isPickable() and node.setPickable( boolean | null ).
Pickable can take three values:
Hit testing is accomplished mainly with node.trailUnderPointer and node.trailUnderPoint, following the above rules. Nodes that are not pickable (pruned) will not have input events targeted to them.
Thus in order for a Node (really, a Trail) to be able to receive input events:
This is useful for semi-transparent overlays or other visual elements that should be displayed but should not prevent objects below from being manipulated by user input, and the default 'null' value is used to increase performance by ignoring areas that don't need user input.
node.opacity is a getter/setter linked to node.getOpacity() and node.setOpacity( opacity ).
Opacity should be in the inclusive range of 0 to 1, where 0 is fully transparent, and 1 is fully opaque. opacity controls not only
the opacity (alpha) of the node itself, but also all of its children.
node.matrix (node.getMatrix(), node.setMatrix( matrix )) gets or sets the transformation matrix
associated with the
node, of type dot.Matrix3.
Getting the translation: node.translation or node.getTranslation(). It always returns a dot.Vector2 instance representing
the translation part of the node's transform. See dot.Matrix3.getTranslation for more
information.
Setting the translation: node.translation = translation, node.setTranslation( translation ) or node.setTranslation(
x, y ).
In both instances, translation can be either a dot.Vector2 or an object literal like { x:
5, y: 10 }.
Translates the node relatively by x and y. In addition to node.translate( x, y ), node.translate(
translation )
can be used, where transform is either a dot.Vector2 or an object like { x: 5, y: 10
}
node.x gets or sets the node's x-translation with node.getX() and node.setX( x ). Accessing
node.x is equivalent
to node.translation.x, and setting node.x is equivalent to node.setTranslation( x, node.y ).
node.y gets or sets the node's y-translation with node.getY() and node.setY( y ). Accessing
node.y is equivalent
to node.translation.y, and setting node.y is equivalent to node.setTranslation( node.x, y ).
node.rotation gets or sets the node's rotation with node.getRotation() and node.setRotation( radians ).
All rotations are
handled in radians ($\pi$ is a 180-degree rotation). If you wish to rotate a node by a specific rotation
(instead of setting its rotation), use node.rotate
Rotates the node's transform. By default the rotation is appended to the node's transform, but the optional prepend boolean flag
can be added for the rotation
to be prepended to the node's transform.
Rotates the node by angle in radians around the dot.Vector2 point.
point should be in the node's parent coordinate frame.
Scales the node in each axis. By default the scale is appended to the node's transform, but the optional prepend boolean flag can
be added for the
scale to be prepended to the node's transform.
node.scale( s ) will scale by s in both dimensions, and is equivalent to node.scale( s, s )
Returns the bounding box of this node (and its children) in the parent coordinate frame. Also available with
node.getBounds(). It includes all children, regardless
of whether they are visible or not.
Returns the bounding box of this node (without its children) in the local coordinate frame. Also available
with node.getSelfBounds().
Returns the bounding box of this node's children (without include the node's selfBounds) in the local
coordinate frame. Also available with node.getChildBounds().
Returns the bounding box of this node (and its children) in the parent coordinate frame. Also available with
node.getVisibleBounds(). Unlike bounds, this includes only descendants which are visible. It is not
tracked, so each call will
need to traverse the subtree to get the bounds.
node.left gets or sets the left bound (minimum x value) of this node's bounds in the parent coordinate
frame, with
node.getLeft() and node.setLeft( x ). Setting this left bound effectively translates the node horizontally.
node.right gets or sets the right bound (maximum x value) of this node's bounds in the parent coordinate
frame, with
node.getRight() and node.setRight( x ). Setting this right bound effectively translates the node horizontally.
node.top gets or sets the top bound (minimum y value) of this node's bounds in the parent coordinate
frame, with
node.getTop() and node.setTop( y ). Setting this top bound effectively translates the node vertically.
node.bottom gets or sets the bottom bound (maximum y value) of this node's bounds in the parent
coordinate frame, with
node.getBottom() and node.setBottom( y ). Setting this bottom bound effectively translates the node vertically.
node.center gets or sets the center of this node's bounds in the parent coordinate frame, with
node.getCenter() and node.setCenter( center ), which both handle the center as a
dot.Vector2 instance. Setting center effectively translates the node.
node.centerX gets or sets the horizontal center of this node's bounds in the parent coordinate frame,
with
node.getCenterX() and node.setCenterX( x ). Setting centerX effectively translates the node horizontally.
node.centerY gets or sets the vertical center of this node's bounds in the parent coordinate frame, with
node.getCenterY() and node.setCenterY( y ). Setting centerY effectively translates the node vertically.
node.renderer gets or sets the preferred rendering backend for the node (and children) using node.getRenderer() or
node.setRenderer( renderer ).
It will always return a Renderer object back, but setting the renderer can be done either with an Renderer
reference or
a string (either 'canvas', 'svg', 'dom' or 'webgl'). Manually specifying a renderer may
preclude future
performance/quality tradeoffs from being automatically made.
Setting a renderer will have this node and its children use that renderer if they support it. This may be impossible (for instance, Paths do not support the 'dom' renderer, and DOM nodes do not support the
'canvas' renderer).
This renderer (if non-null) will override any renderers set on ancestor nodes. Effectively, a node's renderer will be decided by whatever the closest ancestor renderer that is compatible, or the scene default.
Setter backed by node.setLayerSplit( boolean ) that, when to true will cause anything rendered before or after to be in a
separate layer from this node and its children.
For information on accessibility within scenery, please see accessibility.html.
The Display is responsible for visually displaying a specific root Node and all of its descendants. It is
created with new phet.scenery.Display( node, [options] ), where node is the
Node to display, and the options available are documented below. Unlike earlier versions,
the Display is NOT a sub-type of Node, and the root node may be referred to as the 'scene'.
The Display's block-level DOM element that will show all rendered content, to be added to the DOM.
This redraws and/or repositions whatever rendering backends are being used to display the scene. It should be called whenever the scene's display should reflect new changes, generally on each requestAnimationFrame.
display.rootNode or display.getRootNode() will contain the displayed node that was
passed in the constructor.
display.size is a getter/setter for display.getSize() and display.setSize( size ) which can retrieve or
set the size of the display's DOM element (of type
Dimension2). The size will not change until after the next updateDisplay call.
display.width is a getter/setter for display.getWidth() and display.setWidth( width ) which can retrieve
or set the width of the display's DOM element. The width will not change until after the next updateDisplay
call.
display.height is a getter/setter for display.getHeight() and display.setHeight( height ) which can
retrieve or set the height of the display's DOM element. The height will not change until after the next updateDisplay
call.
display.backgroundColor is a getter/setter for display.getBackgroundColor() and display.setBackgroundColor(
backgroundColor ) which can retrieve or set the background color (String or Color) of the display's DOM element
(defaults to transparent). The background color will not change until after the next updateDisplay call.
A trait for Node subtypes that can be filled and/or stroked with a color/gradient/pattern.
Paintable nodes provide a single node.fill getter and setter
that uses node.getFill() and node.setFill( fill ). node.hasFill()
is also available as a quick check, and a null fill is interpreted as not having a fill.
fill can currently be either a string (interpreted as a CSS color), a
Color object, or an instance of a
LinearGradient, RadialGradient or
Pattern.
If a Color object is used for a fill, any changes to the Color object will update this node.
node.fillPickable is a getter/setter linked to node.isFillPickable() and node.setFillPickable( boolean ).
Paths or other Paintable objects will be considered to be under a Pointer when
it is over the region where the fill is painted. This defaults to true.
NOTE: Text nodes currently do not respect this setting, since there is no easy/fast way of determining whether a point is inside or outside of a Text node's painted region.
node.stroke is a getter and setter
that uses node.getStroke() and node.setStroke( stroke ). node.hasStroke()
is also available as a quick check, and a null stroke is interpreted as not having a stroke.
stroke can currently be either a string (interpreted as a CSS color),
a Color object, or an instance of a
LinearGradient, RadialGradient or
Pattern.
If a Color object is used for a stroke, any changes to the Color object will update this node.
node.strokePickable is a getter/setter linked to node.isStrokePickable() and
node.setStrokePickable( boolean ). Paths or other
Paintable objects will be considered to be under a Pointer
when it is over the region where the stroke is painted. This defaults to false, as it is generally more
computationally expensive, and Scenery did not support this initially.
NOTE: Text nodes currently do not respect this setting, since there is no easy/fast way of determining whether a point is inside or outside of a Text node's painted region.
node.lineWidth (node.getLineWidth(), node.setLineWidth( lineWidth ))
controls the thickness of the stroke.
node.lineCap (node.getLineCap(), node.setLineCap( lineCap ))
controls the shape of end-caps, and uses the Canvas lineCap
definitions of 'butt' (default),
'round' and 'square'.
node.lineJoin (node.getLineJoin(), node.setLineJoin( lineJoin ))
controls the shape of segment joins, and uses the Canvas lineJoin
definitions of 'miter' (default),
'round' and 'bevel'.
node.lineDash (node.getLineDash(), node.setLineDash( lineDash ))
controls any dashing of the stroke (or null for no dashing), and uses the Canvas setLineDash
handling
as an even-length array of dash lengths.
node.lineDashOffset (node.getLineDashOffset(), node.setLineDashOffset( lineDashOffset ))
controls the how far the dash pattern in lineDash is offset from the start,
same as the Canvas
lineDashOffset.
node.cachedPaints (node.getCachedPaints(), node.setCachedPaints( paints ))
controls an array of paints (LinearGradients,
RadialGradients, and Patterns) that will be kept in-memory
when the node is being displayed. This allows for much faster performance switching to/from these paints. For
instance, in SVG the gradients will be kept in the <defs> section even while not being used, so they don't
have to be recreated when switched to (where we have seen major performance drops in the past).
Additionally, node.addCachedPaint( paint ) and node.removeCachedPaint( paint ) exist to
be able to manipulate the cached paints without redoing all of them.
Path is a Node subtype that includes the Paintable trait. The main displayed behavior is controlled by its single additional option shape along with the fill and stroke options.
A path is constructed with new phet.scenery.Path( options ), where options
is the standard Node parameter object, where the shape
should be specified.
node.shape (node.getShape(), node.setShape( shape ))
controls the shape of this path, and is either an instance of Kite's
Shape, or it is a string representing an SVG
path,
and will be converted into a Shape.
Image is a Node subtype that displays a single image in either Canvas,
SVG or DOM. An image node is constructed with new phet.scenery.Image( image, [options] ),
where image is as described in image, and
options is the normal options parameter object.
node.image (node.getImage(), node.setImage( image ))
gets or sets the 'image' of the Image node. It can be one of the following:
Text is a Node subtype that (currently) displays a single line of text
in Canvas or SVG. DOM and multiline support is planned. It also mixes in
Paintable,
so it supports fills and strokes with colors, gradients and patterns.
The default fill is '#000', so text is black by default, with no stroke, so
to JUST stroke text, set fill to null.
Text nodes are constructed with new phet.scenery.Text( text, [options] ), where
text is described by text, and options
is the standard Node parameter object.
A Text node has the following parameter object options, in addition to the ones from Paintable.
node.string (node.getString(), node.setString( string ))
gets or sets the string text.
node.font (node.getFont(), node.setFont( font ))
gets or sets the entire font. This can be a Font object, or a String
that is interpreted as a CSS font.
Note that Canvas places restrictions on the possible interpreted values, so only those should be set on a Text node.
node.fontWeight (node.getFontWeight(), node.setFontWeight( weight ))
gets or sets the font weight by internally forwarding to the Text node's
internal Font reference.
Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.
node.fontFamily (node.getFontFamily(), node.setFontFamily( family ))
gets or sets the font family by internally forwarding to the Text node's
internal Font reference.
Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.
node.fontStretch (node.getFontStretch(), node.setFontStretch( stretch ))
gets or sets the font stretch by internally forwarding to the Text node's
internal Font reference.
Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.
node.fontStyle (node.getFontStyle(), node.setFontStyle( style ))
gets or sets the font style by internally forwarding to the Text node's
internal Font reference.
Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.
node.fontSize (node.getFontSize(), node.setFontSize( size ))
gets or sets the font size by internally forwarding to the Text node's
internal Font reference.
Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.
node.lineHeight (node.getLineHeight(), node.setLineHeight( lineHeight ))
gets or sets the line height by internally forwarding to the Text node's
internal Font reference.
Setting the fontWeight will create a new internal Font object, so future changes to the original Font will not apply to this node.
node.direction (node.getDirection(), node.setDirection( direction ))
sets the LTR or RTL direction of the text. It should take on values from
Canvas's context.direction,
but proper bounds and renderer compatibility is not ensured yet
node.boundsMethod (node.getBoundsMethod(), node.setBoundsMethod( method ))
sets what type of method is used for determining Text bounds. Currently, there are three options: "fast"
which may be somewhat inaccurate, is much faster, and disables Canvas rendering entirely, "fastCanvas" (default)
which is similar but allows Canvas rendering but with dirty region redrawing disabled, or "accurate"
which is accurate and supports dirty regions, but is much slower.
DOM is a subtype of Node that positions a DOM element inside the scene using CSS transforms. If the element is attached somewhere else, it will be removed and added into the DOM within the display's container block-level element.
DOM nodes should be constructed by passing in the DOM element, along with a parameter object if desired:
new phet.scenery.DOM( element, [options] )
node.element (node.getElement(), node.setElement( domElement ))
controls the displayed DOM element. If the element is a block-level element, it should have a specified
width and height.
node.interactive (node.getInteractive(), node.setInteractive( boolean )),
when set to true, will signal to Scenery's event system that preventDefault() should not be called
on DOM events when the DOM node is the event target.
A LinearGradient can be used in place of a color for any fill or stroke, but is usually done for Paths.
LinearGradient is constructed and used very similarly to Canvas's
context.createLinearGradient,
with
new phet.scenery.LinearGradient( x0, y0, x1, y1 ) where the gradient goes from (x0,y0) to
(x1,y1), and then color stops can be added.
Adds a point of color along the gradient, where a ratio of 0 is a color point at (x0,y0) and a ratio of 1 is a color point at (x1,y1).
Given a Matrix3 for matrix, it will transform
the gradient as it is applied. This should only be done before adding it as a fill/stroke to
any nodes.
A RadialGradient can be used in place of a color for any fill or stroke, but is usually done for Paths.
RadialGradient is constructed and used very similarly to Canvas's
context.createRadialGradient,
with
new phet.scenery.RadialGradient( x0, y0, r0, x1, y1, r1 ) where the gradient handled between
two circles, one centered at (x0,y0) with a radius r0, and the other at (x1,y1) with a radius r1.
Due to SVG compatibility, this is slightly constricted, as the smaller circle needs to be completely
within the larger circle. Then color stops can be added.
NOTE: Firefox 19 (Win 7) does not currently render "conic" radial gradients correctly (where x0 != x1 or y0 != y1). This does not appear to be the case with Firefox 19 on Mac, but please refrain from those edge-case gradients.
Adds a point of color along the gradient, where a ratio of 0 is a color point at (x0,y0) and a ratio of 1 is a color point at (x1,y1).
Given a Matrix3 for matrix, it will transform
the gradient as it is applied. This should only be done before adding it as a fill/stroke to
any nodes.
A Pattern can be used in place of a color for any fill or stroke, but is usually done for Paths.
Pattern is constructed and used very similarly to Canvas's
context.createPattern,
with
new phet.scenery.Pattern( image ) where image is an HTMLImageElement.
Given a Matrix3 for matrix, it will transform
the gradient as it is applied. This should only be done before adding it as a fill/stroke to
any nodes.
Rectangle is a subtype of Path that is more convenient to construct and modify, and contains more optimized drawing routines for Canvas and SVG.
A Rectangle is normally created with new phet.scenery.Rectangle( x, y, width, height, [options] ),
but rounded corners can be specified with new phet.scenery.Rectangle( x, y, width, height, arcWidth, arcHeight, [options] ),
or all of the parameters can be specified in the options with
new phet.scenery.Rectangle( { rectX: _, rectY: _, rectWidth: _, rectHeight: _, ... } )
node.rectX (node.getRectX(), node.setRectX( x ))
retrieves or modifies the 'x' parameter of the Rectangle.
node.rectY (node.getRectY(), node.setRectY( y ))
retrieves or modifies the 'y' parameter of the Rectangle.
node.rectWidth (node.getRectWidth(), node.setRectWidth( width ))
retrieves or modifies the 'width' parameter of the Rectangle.
node.rectHeight (node.getRectHeight(), node.setRectHeight( height ))
retrieves or modifies the 'height' parameter of the Rectangle.
node.cornerRadius (node.getCornerRadius(), node.setCornerRadius( radius ))
retrieves or modifies the 'cornerRadius' parameter of the Rectangle. This effectively
sets both the cornerXRadius and
cornerYRadius at the same time. An assertion will fail if the getter is
called while the two corner radii are different.
node.cornerXRadius (node.getCornerXRadius(), node.setCornerXRadius( radius ))
retrieves or modifies the 'cornerXRadius' parameter of the Rectangle.
node.cornerYRadius (node.getCornerYRadius(), node.setCornerYRadius( radius ))
retrieves or modifies the 'cornerYRadius' parameter of the Rectangle.
Circle is a subtype of Path that is more convenient to construct and modify, and contains more optimized drawing routines for SVG.
A Circle is created with new phet.scenery.Circle( radius, [options] ) with the specified radius.
node.radius (node.getRadius(), node.setRadius( radius ))
retrieves or modifies the 'radius' parameter of the Circle.
Line is a subtype of Path that is more convenient to construct and modify, and contains more optimized drawing routines for SVG.
A Line is created with new phet.scenery.Line( x1, y1, x2, y2, [options] ) as a line from (x1,y1) to (x2,y2). Additionally,
the constructors new phet.scenery.Line( new Vector2( x1, y1 ), new Vector2( x2, y2 ), [options] ) and
new phet.scenery.Line( { x1: x1, y1: y1, x2: x2, y2: y2, [other options] } )
are supported.
node.x1 (node.getX1(), node.setX1( x1 ))
retrieves or modifies the 'x1' parameter of the Line.
node.y1 (node.getY1(), node.setY1( y1 ))
retrieves or modifies the 'y1' parameter of the Line.
node.x2 (node.getX2(), node.setX2( x2 ))
retrieves or modifies the 'x2' parameter of the Line.
node.y2 (node.getY2(), node.setY2( y2 ))
retrieves or modifies the 'y2' parameter of the Line.
node.p1 (node.getPoint1(), node.setPoint1( p1 ))
retrieves or modifies the Vector2 (x1,y1) of the Line.
node.p2 (node.getPoint2(), node.setPoint2( p2 ))
retrieves or modifies the Vector2 (x2,y2) of the Line.
Font represents a single immutablefont, which can be queried for various parameters, and can be changed.
It can be constructed with new phet.scenery.Font() initialized with the default font '10px sans-serif',
scenery.Font.fromCSS( cssFontString ) initialized with the specified CSS Font,
or with a property object new phet.scenery.Font( { ... } ), where any of the Font's properties
(font, family, weight, stretch, style, size, and lineHeight)
can be present.
For example, new phet.scenery.Font( { size: 16, style: 'italic' } ) and scenery.Font.fromCSS( 'italic 16px sans-serif' )
are equivalent ways of creating that specific Font instance. In addition:
new phet.scenery.Font().font // "10px sans-serif" (the default)
new phet.scenery.Font( { family: 'serif' } ).font // "10px serif"
new phet.scenery.Font( { weight: 'bold' } ).font // "bold 10px sans-serif"
new phet.scenery.Font( { size: 16 } ).font // "16px sans-serif"
var font = new phet.scenery.Font( {
family: '"Times New Roman", serif',
style: 'italic',
lineHeight: 10
} );
font.font; // "italic 10px/10 'Times New Roman', serif"
font.family; // "'Times New Roman', serif"
font.weight; // 400 (the default)
font.font (font.getFont())
retrieves the shorthand CSS 'font' property of the Font object.
This property completely specifies all font settings.
font.family (font.getFamily())
retrieves the CSS 'font-family' property of the Font object.
font.weight (font.getWeight())
retrieves the CSS 'font-weight' property of the Font object.
font.stretch (font.getStretch())
retrieves the CSS 'font-stretch' property of the Font object.
font.style (font.getStyle())
retrieves the CSS 'font-style' property of the Font object.
font.size (font.getSize())
retrieves the CSS 'font-size' property of the Font object.
Deprecated: font.lineHeight (font.getLineHeight())
retrieves the CSS 'line-height' property of the Font object.
A Color can be constructed either with any valid CSS color (new phet.scenery.Color( cssColorString )), or with components directly
(new phet.scenery.Color( red, green blue [, alpha] )) where red/green/blue are 0-255, and alpha is 0-1.
Color operations will assume that the color is not pre-multiplied.
color.red (color.getRed(), color.setRed( redInt ))
retrieves or modifies the red component of the color. It will be returned or converted to an integral value between 0-255 (inclusive).
color.green (color.getGreen(), color.setGreen( greenInt ))
retrieves or modifies the green component of the color. It will be returned or converted to an integral value between 0-255 (inclusive).
color.blue (color.getBlue(), color.setBlue( blueInt ))
retrieves or modifies the blue component of the color. It will be returned or converted to an integral value between 0-255 (inclusive).
color.alpha (color.getAlpha(), color.setAlpha( alphaFloat ))
retrieves or modifies the alpha component of the color. It will be returned or converted to an integral value between 0-1 (inclusive).
Returns a CSS value for the color, currently using 'rgb' or 'rgba'.