# 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.

Source

# 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.

group.js:225

# RemoveChildren

Argument Description
children The objects to be removed.

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

group.js:237

# OrderChildren

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

group.js:249

# Properties

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

group.js:258

# 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.

group.js:86

# 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.

group.js:93

# linewidth

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

group.js:100

# opacity

The opaqueness of all child shapes.

group.js:106

nota-bene

Becomes multiplied by the individual child's opacity property.

# visible

Display the path or not.

group.js:113

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.

# cap

See: https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty (opens new window)

group.js:120

# join

See: https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty (opens new window)

group.js:127

# miter

See: https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty (opens new window)

group.js:134

# closed

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

group.js:141

# curved

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

group.js:147

# 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.

group.js:153

# 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.

group.js:159

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.

group.js:167

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.

group.js:175

# mask

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

group.js:181

# additions

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

group.js:199

# subtractions

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

group.js:206

# children

A list of all the children in the scenegraph.

group.js:213

nota-bene

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

# 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.

group.js:275

# toObject

Returns: Object

Return a JSON compatible plain object that represents the group.

group.js:320

# corner

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

group.js:350

# center

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

group.js:374

# getById

Returns: Two.Shape

  • Or null if nothing is found.

Recursively search for id. Returns the first element found.

group.js:402

# getByClassName

Returns: Array.<Two.Shape>

  • Or empty array if nothing is found.

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

group.js:426

# 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.

group.js:449

# add

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

Add objects to the group.

group.js:472

# remove

Argument Description
objects An array of objects to be removed. Can be also removed as individual arguments. If no arguments are passed, then it removes itself from its parent.

Remove objects from the group.

group.js:506

# 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.

group.js:549

# noFill

Apply noFill method to all child shapes.

group.js:623

# noStroke

Apply noStroke method to all child shapes.

group.js:635

# subdivide

Apply subdivide method to all child shapes.

group.js:647

← Two.Stop →