# Two.Points

Extends: Two.Shape

This is a primary primitive class for quickly and easily drawing points in Two.js. Unless specified methods return their instance of Two.Points for the purpose of chaining.

Source

# Constructor

Argument Description
vertices A list of Two.Vectors that represent the order and coordinates to construct a rendered set of points.

# Properties

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

points.js:170

# fromObject

Returns: Two.Points

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

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

points.js:188

nota-bene

Works in conjunction with Two.Points.toObject

# size

Number describing the diameter each point should have

Set the size of each point in the collection of Two.Points

points.js:76

# sizeAttenuation

Boolean dictating whether Two.js should scale the size of the points based on its matrix hierarchy.

Set to true if you'd like the size of the points to be relative to the scale of its parents; false to disregard. Default is false.

points.js:83

# beginning

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

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

points.js:90

# ending

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

Two.Points.ending is a percentage value that represents at what percentage into the points the renderer should stop drawing.

points.js:97

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

points.js:106

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

points.js:113

# linewidth

The thickness in pixels of the stroke.

points.js:120

# opacity

The opaqueness of the path.

points.js:126

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.

points.js:133

nota-bene

Only rendered to DOM in the SVG renderer.

# visible

Display the points or not.

points.js:140

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 vector points for rendering points.

A list of Two.Vector objects that consist of which coordinates to draw points at.

points.js:147

nota-bene

The array when manipulating is actually a Two.Collection.

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

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.

points.js:155

# dashes.offset

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

points.js:163

# copy

Argument Description
points The reference Two.Points

Copy the properties of one Two.Points onto another.

points.js:212

# clone

Returns: Two.Points

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

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

points.js:240

# toObject

Returns: Object

Return a JSON compatible plain object that represents the points object.

points.js:278

# dispose

Returns: Two.Points

Release the points' renderer resources and detach all events. This method cleans up vertices collection events, individual vertex 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.

points.js:307

# noFill

Short hand method to set fill to none.

points.js:368

# noStroke

Short hand method to set stroke to none.

points.js:375

# corner

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

points.js:382

# center

Orient the vertices of the shape to the center of the points object.

points.js:389

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

points.js:396

# subdivide

Argument Description
limit How many times to recurse subdivisions.

Insert a Two.Vector at the midpoint between every item in Two.Points.vertices.

points.js:405

# length

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

points.js:625

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

points.js:708

← Two.Polygon →