Currently incomplete!
TODO: coordinate frame notesIf you are just starting out, see the Tour of Scenery
See the user input documentation for handling user-generated events.
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/assert.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 scenery npm install grunt
You will now have the built files under build/
If has.js is included, Scenery assertions can be enabled or disabled. Performance can be significantly decreased if all assertions are enabled.
To enable all assertions for debugging, run the following (assuming has.js has been loaded):
has.add( 'assert.basic', function() { return true; } ); has.add( 'assert.slow', function() { return true; } );
or to disable assertions:
has.add( 'assert.basic', function() { return false; } ); has.add( 'assert.slow', function() { return false; } );
A default node can be created with new scenery.Node()
, but usually a parameter object is
given, for example new scenery.Node( { x: 20, y: 100 } )
. Below are all of the available
parameter object options:
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.
Adds an accessibility peer described by the element and options to the tab order (handled for each instance). element
can be either
a DOM element (it is used directly, and tabindex is set on it), or an HTML string (which will be duplicated for each instance). The peer can be focused,
and peers can be modified to reflect the current state of the node.
Currently if it exists, options.click is called when the peer is activated by the keyboard while focused.
For instance, a toggle button or checkbox should generally use '<input type="checkbox">'
for its element.
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 scene.updateCursor or scene.updateScene is called, and event initialization like scene.initializeStandaloneEvents 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 and localBounds of the Node
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.
node.hasRenderer()
is a convenience function to determine if this is set on the node.
node.rendererOptions
gets or sets options for the specified renderer using
node.getRendererOptions()
or node.setRendererOptions( renderer )
.
Setting rendererOptions without setting renderer will have no effect, and may in future
versions throw an error. If this option and the renderer is set, this node will have layer boundaries inserted before and after.
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.
The Scene is the "entry point" of a scene graph. Scene extends Node, so all of its methods and options
are inherited, see Node above.
A scene is created with new scenery.Scene( $container, [options] )
, where $container
is a block-level DOM element (typically a div) wrapped with jQuery that all scene graphics
(Canvas, SVG, etc.) are placed within.
This element must be a positioned element (non-'static' CSS position, see
the MDN docs), and should have a set width and height.
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.
Disposes of all of the scene's necessary resources and listeners, so that it should be able to be garbage collected if no more references are to the Scene. Call this once you no longer need a scene.
Renders all applicable layers that support Canvas output to the specified canvas
(with
the specified context
). The context
is specified in addition to the canvas
to support any custom parameters that were given in context creation.
callback()
is called once the Scene is fully rendered to the canvas. Generally this is
immediate (if the layers are canvas/webgl), or delayed (if a layer contains SVG content). Including
the Canvg library is necessary for rendering SVG
content to Canvas.
DOM content is currently not supported for renderToCanvas.
Asynchronously draws the scene to a canvas with the same size as the scene
(using renderToCanvas, and calls callback( canvas, imageData )
once it is fully written. imageData
is of type ImageData, from the Canvas specification.
If any origin-dirty content (like cross-domain images without CORS) are included in the Scene, this operation will throw a security error.
Asynchronously draws the scene to an image (using scene.canvasSnapshot),
and calls callback( dataURL )
with the
data URI for the image. Generally
this is a PNG. Does not support origin-dirty content (see canvasSnapshot)
inside the scene.
A simple way of setting up scene.updateScene to be called using requestAnimationFrame. More advanced applications will want to handle this themselves.
Attaches event listeners onto the scene's containing block-level element, and forwards them to the scene's input event handling system. This or initializeFullscreenEvents is necessary for cursor handling and input/pointer events.
Attaches event listeners onto the containing document, and forwards them to the scene's input event handling system. This or initializeStandaloneEvents is necessary for cursor handling and input/pointer events.
This may call preventDefault on events unrelated to the scene, so initializeFullscreenEvents should only be used when the scene takes up the entire screen.
Returns an HTML string of debugging information that shows all of the nodes (their constructor type names), and all layering information.
Pops the information from getDebugHTML into a new window.
A mix-in for Node subtypes that can be filled with a color/gradient/pattern.
Fillable 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 Fillable 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.
A mix-in for Node subtypes that can be stroked (outlined) along a border with a color/gradient/pattern.
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.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.strokePickable
is a getter/setter linked to node.isStrokePickable()
and node.setStrokePickable( boolean )
.
Paths or other Strokable 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.
Path is a Node subtype that includes the Fillable and Strokable mixins. 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 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 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
Fillable, and Strokable,
so it should support 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 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 Fillable and Strokable.
node.text
(node.getText()
, node.setText( 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.
HTMLText behaves exactly like Text, except that it displays the text as unescaped HTML.
It will force the DOM renderer (possibly it might also allow the SVG renderer with foreignObject in the future).
The "accurate"
boundsMethod is also disallowed, since using
Canvas for HTML bounds would be extremely inaccurate.
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 scene's container block-level element.
DOM nodes should be constructed by passing in the DOM element, along with a parameter object if desired:
new 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 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 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 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 scenery.Rectangle( x, y, width, height, [options] )
,
but rounded corners can be specified with new scenery.Rectangle( x, y, width, height, arcWidth, arcHeight, [options] )
,
or all of the parameters can be specified in the options with
new 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.rectArcWidth
(node.getRectArcWidth()
, node.setRectArcWidth( arcWidth )
)
retrieves or modifies the 'width' parameter of the Rectangle.
node.rectArcHeight
(node.getRectArcHeight()
, node.setRectArcHeight( arcHeight )
)
retrieves or modifies the 'height' 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 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 scenery.Line( x1, y1, x2, y2, [options] )
as a line from (x1,y1) to (x2,y2). Additionally,
the constructors new scenery.Line( new Vector2( x1, y1 ), new Vector2( x2, y2 ), [options] )
and
new 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 scenery.Font()
initialized with the default font '10px sans-serif',
new scenery.Font( cssFontString )
initialized with the specified CSS Font,
or with a property object new scenery.Font( { ... } )
, where any of the Font's properties
(font, family, weight, stretch, style, size, and lineHeight)
can be present.
For example, new scenery.Font( { size: 16, style: 'italic' } )
and new scenery.Font( 'italic 16px sans-serif' )
are equivalent ways of creating that specific Font instance. In addition:
new scenery.Font().font // "10px sans-serif" (the default) new scenery.Font( { family: 'serif' } ).font // "10px serif" new scenery.Font( { weight: 'bold' } ).font // "bold 10px sans-serif" new scenery.Font( { size: 16 } ).font // "16px sans-serif" var font = new 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 scenery.Color( cssColorString )
), or with components directly
(new 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'.