# 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:262

# 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:274

# OrderChildren

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

group.js:286

# Properties

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

group.js:295

# 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:116

# 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:123

# linewidth

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

group.js:130

# opacity

The opaqueness of all child shapes.

group.js:136

nota-bene

Becomes multiplied by the individual child's opacity property.

# visible

Display the path or not.

group.js:143

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:150

# join

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

group.js:157

# miter

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

group.js:164

# 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:171

# curved

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

group.js:177

# 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:183

# 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:189

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 the renderer should stop drawing.

group.js:197

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:205

# mask

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

group.js:211

# additions

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

group.js:235

# subtractions

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

group.js:242

# children

A list of all the children in the scenegraph.

group.js:249

nota-bene

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

# copy

Returns: Two.Group

Argument Description
group The reference Two.Group

Copy the properties of one Two.Group onto another.

group.js:487

# 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:508

# toObject

Returns: Object

Return a JSON compatible plain object that represents the group.

group.js:551

# dispose

Returns: Two.Group

Release the group's renderer resources and detach all events. This method recursively disposes all child objects, unbinds the children collection events, and preserves the renderer type for potential re-attachment to a new renderer.

group.js:577

# getShapesAtPoint

Returns: Array.<Shape>

Ordered list of intersecting shapes, front to back.

Argument Description
x X coordinate in world space.
y Y coordinate in world space.
options Hit test configuration.
options.visibleOnly Limit results to visible shapes.
options.includeGroups Include groups in the hit results.
options.mode Whether to return all intersecting shapes or only the top-most.
options.deepest Alias for mode: 'deepest'.
options.precision Segmentation precision for curved geometry.
options.tolerance Pixel tolerance applied to hit testing.
options.fill Override fill testing behaviour.
options.stroke Override stroke testing behaviour.
options.filter Predicate to filter shapes from the result set.

Traverse the group hierarchy and return shapes that contain the specified point.

group.js:612

nota-bene

Expects world-space coordinates – the same pixel-space you get from the renderer (e.g., mouse clientX/clientY adjusted for the canvas’s offset and pixel ratio).

# corner

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

group.js:695

# center

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

group.js:717

# getById

Returns: Two.Shape

  • Or null if nothing is found.

Recursively search for id. Returns the first element found.

group.js:743

# getByClassName

Returns: Array.<Two.Shape>

  • Or empty array if nothing is found.

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

group.js:770

# 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:793

# 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:816

# 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:848

# 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:889

# noFill

Apply noFill method to all child shapes.

group.js:970

# noStroke

Apply noStroke method to all child shapes.

group.js:982

# subdivide

Apply subdivide method to all child shapes.

group.js:994

# strokeAttenuation

When set to true, stroke width scales with transformations (default behavior). When false, stroke width remains constant in screen space for all child shapes.

When strokeAttenuation is false, this property is applied to all child shapes, making their stroke widths automatically adjust to compensate for the group's world transform scale, maintaining constant visual thickness regardless of zoom level. When true (default), stroke widths scale normally with transformations.

group.js:1300

← Two.Stop →