Class: Shape
Extends
Implements
Constructors
new Shape()
new Shape(
options
):Shape
Rectangular, circular, or path-based shape
Parameters
• options: ShapeOptions
= {}
Returns
Overrides
Source
Properties
_alpha
_alpha:
number
=1.0
Inherited from
Source
_anchorPoint
private
_anchorPoint:Point
Source
_circleOfRadius?
private
optional
_circleOfRadius:number
Source
_cornerRadius
private
_cornerRadius:number
=0
Source
_draggable
protected
_draggable:boolean
=false
Inherited from
Source
_fillColor
private
_fillColor:RgbaColor
=Constants.DEFAULT_SHAPE_FILL_COLOR
Source
_fillColorPaintAntialiased?
private
optional
_fillColorPaintAntialiased:Paint
Source
_fillColorPaintNotAntialiased?
private
optional
_fillColorPaintNotAntialiased:Paint
Source
_game?
optional
_game:Game
Inherited from
Source
_hidden
protected
_hidden:boolean
=false
Inherited from
Source
_isAntialiased
private
_isAntialiased:boolean
=true
Source
_isUserInteractionEnabled
protected
_isUserInteractionEnabled:boolean
=false
Inherited from
M2Node
._isUserInteractionEnabled
Source
_lineWidth?
private
optional
_lineWidth:number
Source
_path?
private
optional
_path:M2Path
|M2ColorfulPath
|SvgStringPath
Source
_position
_position:
Point
Inherited from
Source
_rect?
private
optional
_rect:RectOptions
Source
_scale
_scale:
number
=1.0
Inherited from
Source
_size
protected
_size:Size
Inherited from
Source
_strokeColor?
private
optional
_strokeColor:RgbaColor
Source
_strokeColorPaintAntialiased?
private
optional
_strokeColorPaintAntialiased:Paint
Source
_strokeColorPaintNotAntialiased?
private
optional
_strokeColorPaintNotAntialiased:Paint
Source
_zPosition
private
_zPosition:number
=0
Source
_zRotation
_zRotation:
number
=0
Inherited from
Source
absoluteAlpha
absoluteAlpha:
number
=1.0
Inherited from
Source
absoluteAlphaChange
absoluteAlphaChange:
number
=0
Inherited from
Source
absolutePosition
absolutePosition:
Point
Inherited from
Source
absoluteScale
absoluteScale:
number
=1.0
Inherited from
Source
actions
actions:
Action
[]
Inherited from
Source
children
children:
M2Node
[]
Inherited from
Source
ckPath
ckPath:
null
|Path
=null
Source
ckPathHeight?
optional
ckPathHeight:number
Source
ckPathWidth?
optional
ckPathWidth:number
Source
colorfulPathPaints
private
colorfulPathPaints:Map
<string
,Paint
>
Source
constructionIso8601TimeStamp
constructionIso8601TimeStamp:
string
Inherited from
M2Node
.constructionIso8601TimeStamp
Source
constructionSequence
constructionSequence:
number
Inherited from
Source
constructionTimeStamp
constructionTimeStamp:
number
Inherited from
Source
dragging
dragging:
boolean
=false
Is the node in a dragging state?
Inherited from
Source
draggingLastPointerOffset
draggingLastPointerOffset:
Point
What was the previous pointer offset when the node was in a dragging state?
Inherited from
M2Node
.draggingLastPointerOffset
Source
eventListeners
eventListeners:
M2NodeEventListener
<M2NodeEvent
>[]
Inherited from
Source
isDrawable
isDrawable:
boolean
=true
Overrides
Source
isShape
isShape:
boolean
=true
Overrides
Source
isText
isText:
boolean
=false
Inherited from
Source
layout
layout:
Layout
={}
FOR INTERNAL USE ONLY
Implementation of
Inherited from
Source
loopMessages
loopMessages:
Set
<string
>
Inherited from
Source
name
name:
string
Name of the node. Only needed if the node will be referred to by name in a later function
Implementation of
Inherited from
Source
needsInitialization
needsInitialization:
boolean
=true
Inherited from
Source
nodeEvents
Inherited from
Source
options
options:
M2NodeOptions
Inherited from
Source
parent?
optional
parent:M2Node
Inherited from
Source
pressed
pressed:
boolean
=false
Is the node in a pressed state? E.g., did the user put the pointer down on the node and not yet release it?
Inherited from
Source
pressedAndWithinHitArea
pressedAndWithinHitArea:
boolean
=false
Is the node in a pressed state AND is the pointer within the node's hit area? For example, a user may put the pointer down on the node, but then move the pointer, while still down, beyond the node's hit area. In this case, pressed = true, but pressedAndWithinHitArea = false.
Inherited from
M2Node
.pressedAndWithinHitArea
Source
pressedInitialPointerOffset
pressedInitialPointerOffset:
Point
When the node initially enters the pressed state, what is the pointer offset? (offset from the canvas's origin to the pointer position). We save this because it will be needed if this press then led to a drag.
Inherited from
M2Node
.pressedInitialPointerOffset
Source
queuedAction?
optional
queuedAction:Action
Inherited from
Source
shapeType
shapeType:
ShapeType
=ShapeType.Undefined
Implementation of
Source
svgFirstPathDraw
private
svgFirstPathDraw:boolean
=true
Source
svgPathHeight
private
svgPathHeight:number
=0
Source
svgPathRequestedHeight?
private
optional
svgPathRequestedHeight:number
Source
svgPathRequestedWidth?
private
optional
svgPathRequestedWidth:number
Source
svgPathScaleForResizing
private
svgPathScaleForResizing:number
=1
Source
svgPathWidth
private
svgPathWidth:number
=0
Source
svgPreviousAbsoluteX
private
svgPreviousAbsoluteX:number
=NaN
Source
svgPreviousAbsoluteY
private
svgPreviousAbsoluteY:number
=NaN
Source
type
readonly
type:Shape
=M2NodeType.Shape
Overrides
Source
userData
userData:
any
={}
Inherited from
Source
uuid
Internal
readonly
uuid:string
Unique identifier (UUID). Will be generated automatically. For m2c2kit library use only
Implementation of
Inherited from
Source
withinHitArea
withinHitArea:
boolean
=false
Inherited from
Source
Accessors
alpha
get
alpha():number
Opacity of the node. 0 is fully transparent, 1 is fully opaque. Default is 1.0. Alpha has multiplicative inheritance. For example, if the node's parent is alpha .5 and this node's is alpha .4, then the node will appear with alpha .2.
set
alpha(alpha
):void
Opacity of the node. 0 is fully transparent, 1 is fully opaque. Default is 1.0. Alpha has multiplicative inheritance. For example, if the node's parent is alpha .5 and this node's is alpha .4, then the node will appear with alpha .2.
Parameters
• alpha: number
Returns
number
Source
ancestors
get
ancestors():M2Node
[]
Returns all ancestor nodes, not including the node itself.
Returns
M2Node
[]
Source
anchorPoint
get
anchorPoint():Point
Point within the node that determines its position. Default is { x: 0.5, y: 0.5 }, which centers the node on its position
set
anchorPoint(anchorPoint
):void
Point within the node that determines its position. Default is { x: 0.5, y: 0.5 }, which centers the node on its position
Parameters
• anchorPoint: Point
Returns
Source
canvasKit
get
canvasKit():CanvasKit
Gets the scene that contains this node by searching up the ancestor tree recursively. Throws exception if node is not part of a scene.
Returns
CanvasKit
Scene that contains this node
Source
circleOfRadius
get
circleOfRadius():undefined
|number
If provided, shape will be a circle with given radius
set
circleOfRadius(circleOfRadius
):void
If provided, shape will be a circle with given radius
Parameters
• circleOfRadius: undefined
| number
Returns
undefined
| number
Source
completeNodeOptions
get
completeNodeOptions():object
Returns
object
alpha?
optional
alpha:number
Opacity of the node. 0 is fully transparent, 1 is fully opaque. Default is 1.0. Alpha has multiplicative inheritance. For example, if the node's parent is alpha .5 and this node's is alpha .4, then the node will appear with alpha .2.
anchorPoint?
optional
anchorPoint:Point
Point within the node that determines its position. Default is { x: 0.5, y: 0.5 }, which centers the node on its position
circleOfRadius
circleOfRadius:
undefined
|number
cornerRadius
cornerRadius:
number
draggable?
optional
draggable:boolean
Can the node be dragged?
fillColor
fillColor:
RgbaColor
hidden?
optional
hidden:boolean
Is the node, and its children, hidden? (not displayed). Default is false
isAntialiased
isAntialiased:
boolean
isUserInteractionEnabled?
optional
isUserInteractionEnabled:boolean
Does the node respond to user events, such as taps? Default is false
layout?
optional
layout:Layout
FOR INTERNAL USE ONLY
lineWidth
lineWidth:
undefined
|number
name?
optional
name:string
Name of the node. Only needed if the node will be referred to by name in a later function
path
path:
undefined
|M2Path
|M2ColorfulPath
|SvgStringPath
position?
optional
position:Point
Position of the node within its parent coordinate system. Default is (0, 0)
rect
rect:
undefined
|RectOptions
scale?
optional
scale:number
Scale of the node. Default is 1.0
size
size:
undefined
|Size
strokeColor
strokeColor:
undefined
|RgbaColor
suppressEvents?
optional
suppressEvents:boolean
Should the node not emit events to the EventStore? Default is false.
Remarks
This property is for use by authors of Composite
nodes. It is not intended for general use.
uuid?
Internal
optional
uuid:string
Unique identifier (UUID). Will be generated automatically. For m2c2kit library use only
zPosition?
optional
zPosition:number
Value along the z-axis to determine drawing and tap order. Larger values are on top.
zRotation?
optional
zRotation:number
Rotation of the node around the Z axis. Unit is radians. Default is 0 (no rotation). zRotation has inheritance. In addition to this node's zRotation, all ancestors' zRotations will be applied.
Source
cornerRadius
get
cornerRadius():number
Radius of rectangle's corners
set
cornerRadius(cornerRadius
):void
Radius of rectangle's corners
Parameters
• cornerRadius: undefined
| number
Returns
number
Source
descendants
get
descendants():M2Node
[]
Returns all descendant nodes.
Remarks
Descendants are children and children of children, recursively.
Returns
M2Node
[]
Source
draggable
get
draggable():boolean
Can the node be dragged?
set
draggable(draggable
):void
Can the node be dragged?
Parameters
• draggable: boolean
Returns
boolean
Source
fillColor
get
fillColor():RgbaColor
Color with which to fill shape. Default is Constants.DEFAULT_SHAPE_FILL_COLOR (WebColors.Red)
set
fillColor(fillColor
):void
Color with which to fill shape. Default is Constants.DEFAULT_SHAPE_FILL_COLOR (WebColors.Red)
Parameters
• fillColor: RgbaColor
Returns
Source
fillColorPaintAntialiased
get
fillColorPaintAntialiased():Paint
set
fillColorPaintAntialiased(value
):void
Parameters
• value: Paint
Returns
Paint
Source
fillColorPaintNotAntialiased
get
fillColorPaintNotAntialiased():Paint
set
fillColorPaintNotAntialiased(value
):void
Parameters
• value: Paint
Returns
Paint
Source
game
get
game():Game
The game which this node is a part of.
Remarks
Throws error if node is not part of the game object.
Returns
Source
hidden
get
hidden():boolean
Is the node, and its children, hidden? (not displayed). Default is false
set
hidden(hidden
):void
Is the node, and its children, hidden? (not displayed). Default is false
Parameters
• hidden: boolean
Returns
boolean
Source
isAntialiased
get
isAntialiased():boolean
Should the shape be drawn with anti-aliasing. Default is yes.
set
isAntialiased(isAntialiased
):void
Should the shape be drawn with anti-aliasing. Default is yes.
Parameters
• isAntialiased: boolean
Returns
boolean
Source
isUserInteractionEnabled
get
isUserInteractionEnabled():boolean
Does the node respond to user events, such as taps? Default is false
set
isUserInteractionEnabled(isUserInteractionEnabled
):void
Does the node respond to user events, such as taps? Default is false
Parameters
• isUserInteractionEnabled: boolean
Returns
boolean
Source
lineWidth
get
lineWidth():undefined
|number
Width of outline. Default is undefined for rectangle and circle, 2 for path.
set
lineWidth(lineWidth
):void
Width of outline. Default is undefined for rectangle and circle, 2 for path.
Parameters
• lineWidth: undefined
| number
Returns
undefined
| number
Source
parentSceneAsNode
get
parentSceneAsNode():M2Node
Returns
Source
path
get
path():undefined
|M2Path
|M2ColorfulPath
|SvgStringPath
A path from which to create the shape
set
path(path
):void
A path from which to create the shape
Parameters
• path: undefined
| M2Path
| M2ColorfulPath
| SvgStringPath
Returns
undefined
| M2Path
| M2ColorfulPath
| SvgStringPath
Source
position
get
position():Point
Position of the node within its parent coordinate system. Default is (0, 0)
set
position(position
):void
Position of the node within its parent coordinate system. Default is (0, 0)
Parameters
• position: Point
Returns
Source
rect
get
rect():undefined
|RectOptions
If provided, shape will be a rectangle as specified in Rect
set
rect(rect
):void
If provided, shape will be a rectangle as specified in Rect
Parameters
• rect: undefined
| RectOptions
Returns
undefined
| RectOptions
Source
scale
get
scale():number
Scale of the node. Default is 1.0
set
scale(scale
):void
Scale of the node. Default is 1.0
Parameters
• scale: number
Returns
number
Source
size
get
size():Size
Size of container "view box" for M2Path and M2ColorfulPath shapes. Leave undefined for circle, rectangle, and SvgStringPath shapes.
set
size(size
):void
Size of container "view box" for M2Path and M2ColorfulPath shapes. Leave undefined for circle, rectangle, and SvgStringPath shapes.
Parameters
• size: Size
Returns
Source
strokeColor
get
strokeColor():undefined
|RgbaColor
Color with which to outline shape. Default is no color for rectangle and circle, red for path.
set
strokeColor(strokeColor
):void
Color with which to outline shape. Default is no color for rectangle and circle, red for path.
Parameters
• strokeColor: undefined
| RgbaColor
Returns
undefined
| RgbaColor
Source
strokeColorPaintAntialiased
get
strokeColorPaintAntialiased():Paint
set
strokeColorPaintAntialiased(value
):void
Parameters
• value: Paint
Returns
Paint
Source
strokeColorPaintNotAntialiased
get
strokeColorPaintNotAntialiased():Paint
set
strokeColorPaintNotAntialiased(value
):void
Parameters
• value: Paint
Returns
Paint
Source
suppressEvents
get
suppressEvents():boolean
Should the node not emit events to the EventStore? Default is false.
Remarks
This property is for use by authors of Composite
nodes. It is not intended for general use.
set
suppressEvents(value
):void
Should the node not emit events to the EventStore? Default is false.
Remarks
This property is for use by authors of Composite
nodes. It is not intended for general use.
Parameters
• value: boolean
Returns
boolean
Source
zPosition
get
zPosition():number
Value along the z-axis to determine drawing and tap order. Larger values are on top.
set
zPosition(zPosition
):void
Value along the z-axis to determine drawing and tap order. Larger values are on top.
Parameters
• zPosition: number
Returns
number
Source
zRotation
get
zRotation():number
Rotation of the node around the Z axis. Unit is radians. Default is 0 (no rotation). zRotation has inheritance. In addition to this node's zRotation, all ancestors' zRotations will be applied.
set
zRotation(zRotation
):void
Rotation of the node around the Z axis. Unit is radians. Default is 0 (no rotation). zRotation has inheritance. In addition to this node's zRotation, all ancestors' zRotations will be applied.
Parameters
• zRotation: number
Returns
number
Source
Methods
addChild()
addChild(
child
):void
Adds a child to this parent node. Throws exception if the child's name is not unique with respect to other children of this parent, or if the child has already been added to another parent.
Parameters
• child: M2Node
The child node to add
Returns
void
Inherited from
Source
addEventListener()
addEventListener<
T
>(type
,callback
,callbackOptions
?):void
Type parameters
• T extends M2NodeEvent
Parameters
• type: string
• callback
• callbackOptions?: CallbackOptions
Returns
void
Inherited from
Source
applyAlphaToPaints()
private
applyAlphaToPaints(alpha
,paints
):void
Parameters
• alpha: number
• paints: (undefined
| Paint
)[]
Returns
void
Source
calculateCKRoundedRectangle()
private
calculateCKRoundedRectangle():Float32Array
Returns
Float32Array
Source
calculateSvgPathX()
private
calculateSvgPathX():number
Returns
number
Source
calculateSvgPathY()
private
calculateSvgPathY():number
Returns
number
Source
calculateTransformationMatrix()
private
calculateTransformationMatrix(pathScale
,x
,y
):number
[]
Parameters
• pathScale: number
• x: number
• y: number
Returns
number
[]
Source
descendant()
descendant<
T
>(name
):T
Searches all descendants by name and returns first matching node.
Type parameters
• T extends M2Node
Parameters
• name: string
Name of the descendant node to return
Returns
T
Inherited from
Remarks
Descendants are children and children of children, recursively. Throws exception if no descendant with the given name is found.
Source
dispose()
Internal
dispose():
void
Frees up resources allocated by the Drawable M2Node.
For m2c2kit library use only
Returns
void
Implementation of
Remarks
This will be done automatically by the m2c2kit library; the end-user must not call this.
Source
draw()
draw(
canvas
):void
Parameters
• canvas: Canvas
Returns
void
Implementation of
Source
drawChildren()
drawChildren(
canvas
):void
Draws each child node that is Drawable and is not hidden, by zPosition order (highest zPosition on top).
Parameters
• canvas: Canvas
CanvasKit canvas
Returns
void
Inherited from
Source
drawCircle()
private
drawCircle(canvas
):void
Parameters
• canvas: Canvas
Returns
void
Source
drawCircleWithCanvasKit()
private
drawCircleWithCanvasKit(canvas
,paint
):void
Parameters
• canvas: Canvas
• paint: Paint
Returns
void
Source
drawPathFromM2Path()
private
drawPathFromM2Path(canvas
):void
Parameters
• canvas: Canvas
Returns
void
Source
drawPathFromSvgString()
private
drawPathFromSvgString(canvas
):void
Parameters
• canvas: Canvas
Returns
void
Source
drawRectangle()
private
drawRectangle(canvas
):void
Parameters
• canvas: Canvas
Returns
void
Source
drawRectangleWithCanvasKit()
private
drawRectangleWithCanvasKit(canvas
,paint
):void
Parameters
• canvas: Canvas
• paint: Paint
Returns
void
Source
duplicate()
duplicate(
newName
?):Shape
Duplicates a node using deep copy.
Parameters
• newName?: string
optional name of the new, duplicated node. If not provided, name will be the new uuid
Returns
Overrides
Remarks
This is a deep recursive clone (node and children). The uuid property of all duplicated nodes will be newly created, because uuid must be unique.
Source
getDrawableOptions()
protected
getDrawableOptions():DrawableOptions
Returns
Inherited from
Source
getFillPaint()
private
getFillPaint():Paint
Returns
Paint
Source
getNodeOptions()
protected
getNodeOptions():M2NodeOptions
Returns
Inherited from
Source
getStrokePaint()
private
getStrokePaint(lineWidth
):Paint
Parameters
• lineWidth: number
Returns
Paint
Source
getTextOptions()
protected
getTextOptions():TextOptions
Returns
Inherited from
Source
initialize()
initialize():
void
Returns
void
Overrides
Source
involvedInActionAffectingAppearance()
involvedInActionAffectingAppearance():
boolean
Determines if this node or ancestor is part of an active action that affects it appearance.
Returns
boolean
true if part of active action affecting appearance
Inherited from
M2Node
.involvedInActionAffectingAppearance
Remarks
This is used to determine if the node should be rendered with anti-aliasing or not. Anti-aliasing on some devices causes a new shader to be compiled during the action, which causes jank.
Source
involvedInSceneTransition()
involvedInSceneTransition():
boolean
Determines if the node is a transitioning Scene or a descendant of a transitioning Scene.
Returns
boolean
true if transitioning
Inherited from
M2Node
.involvedInSceneTransition
Source
onDrag()
onDrag(
callback
,options
?):void
Executes a callback when the user continues dragging a node.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Source
onDragEnd()
onDragEnd(
callback
,options
?):void
Executes a callback when the user stop dragging a node.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Source
onDragStart()
onDragStart(
callback
,options
?):void
Executes a callback when the user begins dragging a node.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Source
onPointerDown()
onPointerDown(
callback
,options
?):void
Executes a callback when the pointer first is down on the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Remarks
PointerDown is a pointer down (mouse click or touches begin) within the bounds of the node. It occurs under the same conditions as TapDown.
Source
onPointerLeave()
onPointerLeave(
callback
,options
?):void
Executes a callback when the user moves the pointer (mouse or touches) outside the bounds of the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Source
onPointerMove()
onPointerMove(
callback
,options
?):void
Executes a callback when the user moves the pointer (mouse or touches) within the bounds of the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Source
onPointerUp()
onPointerUp(
callback
,options
?):void
Executes a callback when the user releases a press from the node within the bounds of the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Remarks
PointerUp is a pointer up (mouse click release or touches end) within the bounds of the node. It does not require that there was a previous PointerDown on the node.
Source
onTapDown()
onTapDown(
callback
,options
?):void
Executes a callback when the user presses down on the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Remarks
TapDown is a pointer down (mouse click or touches begin) within the bounds of the node.
Source
onTapLeave()
onTapLeave(
callback
,options
?):void
Executes a callback when the user moves the pointer (mouse, touches) beyond the bounds of the node while the pointer is down.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Remarks
TapLeave occurs when the pointer (mouse, touches) that has previously pressed the node moves beyond the bounds of the node before the press release.
Source
onTapUp()
onTapUp(
callback
,options
?):void
Executes a callback when the user releases a press, that has been fully within the node, from the node.
Parameters
• callback
function to execute
• options?: CallbackOptions
Returns
void
Inherited from
Remarks
TapUp is a pointer up (mouse click release or touches end) within the bounds of the node and the pointer, while down, has never moved beyond the bounds of the node.
Source
onTapUpAny()
onTapUpAny(
callback
,options
?):void
Executes a callback when the user releases a press from the node within the bounds of the node.
Parameters
• callback
function to execute
• options?: CallbackOptions