Class: Object2D

Object2D()

new Object2D()

Base object class, implements all the object positioning and scaling features. Stores all the base properties shared between all objects as the position, transformation properties, children etc. Object2D object can be used as a group to the other objects drawn.
Source:

Members

beingDragged :boolean

Flag to indicate if the object is currently being dragged.
Type:
  • boolean
Source:

children :Array.<Object2D>

List of children objects attached to the object.
Type:
Source:

draggable :boolean

Draggable controls if its possible to drag the object around. Set this true to enable dragging events on this object. The onPointerDrag callback is used to update the state of the object while being dragged, by default it just updates the object position.
Type:
  • boolean
Source:

draw

Draw the object into the canvas, this is called transform() and style(), should be where the content is actually drawn into the canvas. Should be implemented by underlying classes.
Source:

globalMatrix :Matrix

Global transformation matrix multiplied by the parent matrix. Used to transform the object before projecting into screen coordinates.
Type:
Source:

ignoreViewport :boolean

Flag to indicate whether this object ignores the viewport transformation.
Type:
  • boolean
Source:

inverseGlobalMatrix :Matrix

Inverse of the global (world) transform matrix. Used to convert pointer input points (viewport space) into object coordinates.
Type:
Source:

layer :number

Layer of this object, objects are sorted by layer value. Lower layer value is draw first, higher layer value is drawn on top.
Type:
  • number
Source:

level :number

Depth level in the object tree, objects with higher depth are drawn on top. The layer value is considered first.
Type:
  • number
Source:

masks :Array.<Mask>

Mask objects being applied to this object. Used to mask/subtract portions of this object when rendering. Multiple masks can be used simultaneously. Same mask might be reused for multiple objects.
Type:
Source:

matrix :Matrix

Local transformation matrix applied to the object.
Type:
Source:

matrixAutoUpdate :boolean

Indicates if the transform matrix should be automatically updated every frame. Set this false for better performance. But if you do so dont forget to set matrixNeedsUpdate every time that a transform attribute is changed.
Type:
  • boolean
Source:

matrixNeedsUpdate :boolean

Indicates if the matrix needs to be updated, should be set true after changes to the object position, scale or rotation. The matrix is updated before rendering the object, after the matrix is updated this attribute is automatically reset to false.
Type:
  • boolean
Source:

onAdd

Method called when the object its added to a parent.
Source:

onButtonDown

Callback method called when the pointer button is pressed down (single time).
Source:

onButtonPressed

Method called while the pointer button is pressed.
Source:

onButtonUp

Method called when the pointer button is released (single time).
Source:

onDoubleClick

Method called while the pointer button is double clicked.
Source:

onPointerDragEnd

Callback method called when the pointer drag ends after the button has been released.
Source:

onPointerDragStart

Callback method called when the pointer drag start after the button was pressed
Source:

onPointerEnter

Callback method called when the pointer enters the object. It is not called while the pointer is inside of the object, just on the first time that the pointer enters the object for that use onPointerOver()
Source:

onPointerLeave

Method called when the was inside of the object and leaves the object.
Source:

onPointerOver

Method while the pointer is over (inside) of the object.
Source:

onRemove

Method called when the object gets removed from its parent
Source:

onUpdate

Callback method called every time before the object is draw into the canvas. Should be used to run object logic, any preparation code, move the object, etc. This method is called for every object before rendering.
Source:

origin :Vector2

Origin of the object used as point of rotation.
Type:
Source:

parent :Object2D

Parent object, the object position is affected by its parent position.
Type:
Source:

pointerEvents :boolean

Indicates if this object uses pointer events. Can be set false to skip the pointer interaction events, better performance if pointer events are not required.
Type:
  • boolean
Source:

pointerInside :boolean

Flag indicating if the pointer is inside of the element. Used to control object event.
Type:
  • boolean
Source:

position :Vector2

Position of the object. The world position of the object is affected by its parent transform.
Type:
Source:

restoreContextState :boolean

Flag to indicate if the context of canvas should be restored after render.
Type:
  • boolean
Source:

rotation :number

Rotation of the object relative to its center. The world rotation of the object is affected by the parent transform.
Type:
  • number
Source:

saveContextState :boolean

Flag to indicate if the context of canvas should be saved before render.
Type:
  • boolean
Source:

scale :Vector2

Scale of the object. The world scale of the object is affected by the parent transform.
Type:
Source:

style

Style is called right before draw() it should not draw any content into the canvas, all context styling should be applied here (colors, fonts, etc). The draw() and style() methods can be useful for objects that share the same styling attributes but are drawing differently. Should be implemented by underlying classes.
Source:

uuid :string

UUID of the object.
Type:
  • string
Source:

visible :boolean

Indicates if the object is visible.
Type:
  • boolean
Source:

Methods

add(object)

Attach a children to this object. The object is set as children of this object and the transformations applied to this object are traversed to its children.
Parameters:
Name Type Description
object Object2D Object to attach to this object.
Source:

destroy()

Destroy the object, removes it from the parent object.
Source:

getChildByUUID(uuid) → {Object2D}

Get a object from its children list by its UUID.
Parameters:
Name Type Description
uuid string UUID of the object to get.
Source:
Returns:
The object that has the UUID specified, null if the object was not found.
Type
Object2D

getWorldPointIntersections(point, list) → {Array.<Object2D>}

Check if a point in world coordinates intersects this object or its children and get a list of the objects intersected.
Parameters:
Name Type Description
point Vector2 Point in world coordinates.
list Array.<Object2D> List of objects intersected passed to children objects recursively.
Source:
Returns:
List of object intersected by this point.
Type
Array.<Object2D>

isInside(point) → {boolean}

Check if a point is inside of the object. Used by the renderer check for pointer collision (required for the object to properly process pointer events). Point should be in local object coordinates. To check if a point in world coordinates intersects the object the inverseGlobalMatrix should be applied to that point before calling this method.
Parameters:
Name Type Description
point Vector2 Point in local object coordinates.
Source:
Returns:
True if the point is inside of the object.
Type
boolean

isWorldPointInside(point, recursive) → {boolean}

Check if a point in world coordinates intersects this object or some of its children.
Parameters:
Name Type Description
point Vector2 Point in world coordinates.
recursive boolean If set to true it will also check intersections with the object children.
Source:
Returns:
Returns true if the point in inside of the object.
Type
boolean

onPointerDrag(pointer, viewport, delta, positionWorld)

Callback method while the object is being dragged across the screen. By default is adds the delta value to the object position (making it follow the mouse movement). Delta is the movement of the pointer already translated into local object coordinates. To detect when the object drag stops the onPointerDragEnd() method can be used.
Parameters:
Name Type Description
pointer Pointer Pointer object that receives the user input.
viewport Viewport Viewport where the object is drawn.
delta Vector2 Pointer movement diff in world space since the last frame.
positionWorld Vector2 Position of the dragging pointer in world coordinates.
Source:

remove(children)

Remove object from the children list.
Parameters:
Name Type Description
children Object2D Object to be removed.
Source:

transform(context, viewport)

Apply the transform to the rendering context, it is assumed that the viewport transform is pre-applied to the context. This is called before style() and draw(). It can also be used for some pre-rendering logic.
Parameters:
Name Type Description
context CanvasRenderingContext2D Canvas 2d drawing context.
viewport Viewport Viewport applied to the canvas.
Source:

traverse(callback)

Traverse the object tree and run a function for all objects.
Parameters:
Name Type Description
callback function Callback function that receives the object as parameter.
Source:

updateMatrix(context)

Update the transformation matrix of the object.
Parameters:
Name Type Description
context CanvasRenderingContext2D Canvas 2d drawing context.
Source: