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

Source

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

path.js:383

# closed

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

path.js:260

# curved

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

path.js:266

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

path.js:272

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.

path.js:280

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.

path.js:290

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

path.js:297

# linewidth

The thickness in pixels of the stroke.

path.js:304

# opacity

The opaqueness of the path.

path.js:310

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.

path.js:317

nota-bene

Only available for the SVG renderer.

# visible

Display the path or not.

path.js:324

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)

path.js:331

# join

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

path.js:338

# miter

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

path.js:345

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

path.js:352

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.

path.js:360

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

path.js:366

# dashes.offset

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

path.js:374

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

path.js:407

# toObject

Returns: Object

Return a JSON compatible plain object that represents the path.

path.js:447

# noFill

Short hand method to set fill to none.

path.js:487

# noStroke

Short hand method to set stroke to none.

path.js:497

# corner

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

path.js:507

# center

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

path.js:539

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

path.js:566

# getPointAt

Returns: Object

Argument Description
t Percentage value describing where on the Two.Path to estimate and assign coordinate values.
obj 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.

path.js:685

# plot

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

path.js:824

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.

path.js:845

# length

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

path.js:1269

# mask

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

path.js:1383

nota-bene

This property is currently not working because 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).

path.js:1406

← Two.Text →