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

fromObject

Returns: Two.Path

Argument	Description
obj	Object notation of a Two.Path to create a new instance

Create a new Two.Path from an object notation of a Two.Path.

path.js:463

nota-bene

Works in conjunction with Two.Path.toObject

closed

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

path.js:316

curved

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

path.js:322

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

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

path.js:336

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 for more information on CSS's colors as String.

path.js:346

stroke

The value of what the path should be outlined in with.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value for more information on CSS's colors as String.

path.js:353

linewidth

The thickness in pixels of the stroke.

path.js:360

opacity

The opaqueness of the path.

path.js:366

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

nota-bene

Only rendered to DOM in the SVG renderer.

visible

Display the path or not.

path.js:380

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

path.js:387

join

See: https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty

path.js:394

miter

See: https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty

path.js:401

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

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

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

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

path.js:422

dashes.offset

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

path.js:430

copy

Argument	Description
path	The reference Two.Path

Copy the properties of one Two.Path onto another.

path.js:487

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

toObject

Returns: Object

Return a JSON compatible plain object that represents the path.

path.js:556

nota-bene

Works in conjunction with Two.Path.fromObject

Release the path's renderer resources and detach all events. This method cleans up vertices collection events, individual vertex events, control point events, and disposes fill/stroke effects (calling dispose() on Gradients and Textures for thorough cleanup) while preserving the renderer type for potential re-attachment to a new renderer.

path.js:586

noFill

Short hand method to set fill to none.

path.js:659

noStroke

Short hand method to set stroke to none.

path.js:669

corner

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

path.js:680

center

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

path.js:710

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

contains

Returns: Boolean

Argument	Description
x	x coordinate to hit test against
y	y coordinate to hit test against
options	Optional options object
options.ignoreVisibility	If `true`, hit test against `path.visible = false` shapes
options.tolerance	Padding to hit test against in pixels

Check to see if coordinates are within a Two.Path's bounding rectangle

path.js:850

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

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

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

nota-bene

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

smooth

Argument	Description
options	Configuration for smoothing.
options.type	Type of smoothing algorithm.
options.from	Index of vertices to start smoothing
options.to	Index of vertices to terminate smoothing

Adjust vertex handles to generate smooth curves without toggling automatic.

path.js:1106

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

length

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

path.js:1780

mask

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

path.js:1890

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

strokeAttenuation

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

When strokeAttenuation is false, the stroke width is automatically adjusted to compensate for the object's world transform scale, maintaining constant visual thickness regardless of zoom level. When true (default), stroke width scales normally with transformations.

path.js:1939