# Two.Shape

Extends: Two.Element

The foundational transformation object for the Two.js scenegraph.

Source

# renderer

Object access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.

shape.js:89

nota-bene

With the Two.SVGRenderer you can access the underlying SVG element created via shape.renderer.elem.

# id

Session specific unique identifier.

shape.js:98

nota-bene

In the Two.SVGRenderer change this to change the underlying SVG element's id too.

# matrix

The transformation matrix of the shape.

shape.js:105

nota-bene

Two.Shape.position, Two.Shape.rotation, Two.Shape.scale, Two.Shape.skewX, and Two.Shape.skewY apply their values to the matrix when changed. The matrix is what is sent to the renderer to be drawn.

# worldMatrix

The transformation matrix of the shape in the scene.

shape.js:113

# position

The x and y value for where the shape is placed relative to its parent.

shape.js:120

# rotation

The value in Number for how much the shape is rotated relative to its parent.

shape.js:126

# scale

The value for how much the shape is scaled relative to its parent.

shape.js:132

nota-bene

This value can be replaced with a Two.Vector to do non-uniform scaling. e.g: shape.scale = new Two.Vector(2, 1);

# skewX

The value in Number for how much the shape is skewed relative to its parent.

Skew the shape by an angle in the x axis direction.

shape.js:139

# skewY

The value in Number for how much the shape is skewed relative to its parent.

Skew the shape by an angle in the y axis direction.

shape.js:146

# translation

Alias for Two.Shape.position.

shape.js:162

# addTo

Argument Description
group The parent the shape adds itself to.

Convenience method to add itself to the scenegraph.

shape.js:173

# remove

Remove self from the scene / parent.

shape.js:184

# clone

Returns: Two.Shape

Argument Description
parent Optional argument to automatically add the shape to a scenegraph.

Create a new Two.Shape with the same values as the current shape.

shape.js:201

← Two.Path →