# Two.Path

Extends: Two.Shape

This is the primary primitive class for creating all drawable shapes in Two.js. Unless specified methods return their instance of Two.Path for the purpose of chaining.

# Constructor

Argument Description
vertices A list of Two.Anchors that represent the order and coordinates to construct the rendered shape.
closed Describes whether the shape is closed or open.
curved Describes whether the shape automatically calculates bezier handles for each vertex.
manual Describes whether the developer controls how vertices are plotted or if Two.js automatically plots coordinates based on closed and curved booleans.

# Properties

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

# FlagVertices

Cached method to let renderers know vertices have been updated on a Two.Path.

# BindVertices

Cached method to let Two.Path know vertices have been added to the instance.

# UnbindVertices

Cached method to let Two.Path know vertices have been removed from the instance.

# FlagFill

Cached method to let Two.Path know the fill has changed.

# FlagFill

Cached method to let Two.Path know the stroke has changed.

# MakeObservable

Argument Description
object The object to make observable.

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

# closed

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

# curved

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

# beginning

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

Two.Path.beginning is a percentage value that represents at what percentage into the path should the renderer start drawing.

nota-bene

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

# ending

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

Two.Path.ending is a percentage value that represents at what percentage into the path should the renderer start drawing.

nota-bene

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

# fill

The value of what the path 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 the path 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.

# opacity

The opaqueness of the path.

nota-bene

Can be used in conjunction with CSS Colors that have an alpha value.

# className

A class to be applied to the element to be compatible with CSS styling.

nota-bene

Only available for the SVG renderer.

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

# vertices

An ordered list of anchor points for rendering the path.

A list of Two.Anchor objects that consist of what form the path takes.

nota-bene

The array when manipulating is actually a Two.Collection.

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

# dashes

Array of numbers. Odd indices represent dash length. Even indices represent dash space.

A list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.

See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray (opens new window) for more information on the SVG stroke-dasharray attribute.

# dashes.offset

A number in pixels to offset Two.Path.dashes display.

# length

The sum of distances between all Two.Path.vertices.

# mask

The shape whose alpha property becomes a clipping area for the path.

nota-bene

This property is currently not working becuase of SVG spec issues found here {@link https://code.google.com/p/chromium/issues/detail?id=370951}.

# clip

Tells Two.js renderer if this object represents a mask for another object (or not).

# clone

Returns: Two.Path

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

Create a new instance of Two.Path with the same properties of the current path.

# toObject

Returns: Object

Return a JSON compatible plain object that represents the path.

# noFill

Short hand method to set fill to transparent.

# noStroke

Short hand method to set stroke to transparent.

# corner

Orient the vertices of the shape to the upper left-hand corner of the path.

# center

Orient the vertices of the shape to the center of the path.

# remove

Remove self from the scene / parent.

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

# getPointAt

Returns: Object

Argument Description
t Percentage value describing where on the Two.Path to estimate and assign coordinate values.
object Object to apply calculated x, y to. If none available returns new Object.

Given a float t from 0 to 1, return a point or assign a passed obj's coordinates to that percentage on this Two.Path's curve.

# plot

Based on closed / curved and sorting of vertices plot where all points should be and where the respective handles should be too.

nota-bene

While this method is public it is internally called by Two.Path._update when automatic = true.

# subdivide

Argument Description
limit How many times to recurse subdivisions.

Insert a Two.Anchor at the midpoint between every item in Two.Path.vertices.