# Two.Group

Extends: Two.Shape

This is the primary class for grouping objects that are then drawn in Two.js. In Illustrator this is a group, in After Effects it would be a Null Object. Whichever the case, the Two.Group contains a transformation matrix and commands to style its children, but it by itself doesn't render to the screen.

# Constructor

Argument Description
children A list of objects that inherit Two.Shape. For instance, the array could be a Two.Path, Two.Text, and Two.RoundedRectangle.

# InsertChildren

Argument Description
children The objects to be inserted.

Cached method to let renderers know children have been added to a Two.Group.

# RemoveChildren

Argument Description
children The objects to be removed.

Cached method to let renderers know children have been removed from a Two.Group.

# OrderChildren

Cached method to let renderers know order has been updated on a Two.Group.

# Properties

A list of properties that are on every Two.Group.

# MakeObservable

Argument Description
object The object to make observable.

Convenience function to apply observable qualities of a Two.Group to any object. Handy if you'd like to extend the Two.Group class on a custom class.

# MakeGetterSetters

Argument Description
group The group to apply getters and setters.
properties A key / value object containing properties to inherit.

Convenience method to apply getter / setter logic on an array of properties. Used in Two.Group.MakeObservable.

# MakeGetterSetter

Argument Description
group The group to apply getters and setters.
key The key which will become a property on the group.

Convenience method to apply getter / setter logic specific to how Two.Groups trickle down styles to their children. Used in Two.Group.MakeObservable.

# additions

An automatically updated list of children that need to be appended to the renderer's scenegraph.

# subtractions

An automatically updated list of children that need to be removed from the renderer's scenegraph.

# children

A list of all the children in the scenegraph.

nota-bene

Ther order of this list indicates the order each element is rendered to the screen.

# fill

The value of what all child shapes should be filled in with.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens new window) for more information on CSS's colors as String.

# stroke

The value of what all child shapes should be outlined in with.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens new window) for more information on CSS's colors as String.

# linewidth

The thickness in pixels of the stroke for all child shapes.

# opacity

The opaqueness of all child shapes.

nota-bene

Becomes multiplied by the individual child's opacity property.

# visible

Display the path or not.

nota-bene

For Two.CanvasRenderer and Two.WebGLRenderer when set to false all updating is disabled improving performance dramatically with many objects in the scene.

# closed

Determines whether a final line is drawn between the final point in the vertices array and the first point of all child shapes.

# curved

When the child's path is automatic = true this boolean determines whether the lines between the points are curved or not.

# automatic

Determines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves.

# beginning

Number between zero and one to state the beginning of where the path is rendered.

Two.Group.beginning is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.

nota-bene

This is great for animating in and out stroked paths in conjunction with Two.Group.ending.

# ending

Number between zero and one to state the ending of where the path is rendered.

Two.Group.ending is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.

nota-bene

This is great for animating in and out stroked paths in conjunction with Two.Group.beginning.

# length

The sum of distances between all child lengths.

# mask

The Two.js object to clip from a group's rendering.

# clone

Returns: Two.Group

Argument Description
parent The parent group or scene to add the clone to.

Create a new instance of Two.Group with the same properties of the current group.

# toObject

Returns: Object

Return a JSON compatible plain object that represents the group.

# corner

Orient the children of the group to the upper left-hand corner of that group.

# center

Orient the children of the group to the center of that group.

# getById

Returns: Two.Shape

  • Or null if nothing is found.

Recursively search for id. Returns the first element found.

# getByClassName

Returns: Array.<Two.Shape>

  • Or empty array if nothing is found.

Recursively search for classes. Returns an array of matching elements.

# getByType

Returns: Array.<Two.Shape>

  • Empty array if nothing is found.

Recursively search for children of a specific type, e.g. Two.Path. Pass a reference to this type as the param. Returns an array of matching elements.

# add

Argument Description
objects An array of objects to be added. Can be also be supplied as individual arguments.

Add objects to the group.

# add

Argument Description
objects An array of objects to be removed. Can be also removed as individual arguments.

Remove objects from the group.

# getBoundingClientRect

Returns: Object

  • Returns object with top, left, right, bottom, width, height attributes.
Argument Description
shallow Describes whether to calculate off local matrix or world matrix.

Return an object with top, left, right, bottom, width, and height parameters of the group.

# noFill

Apply noFill method to all child shapes.

# noStroke

Apply noStroke method to all child shapes.

# subdivide

Apply subdivide method to all child shapes.