# Two.Text

Extends: Two.Shape

This is a primitive class for creating drawable text that can be added to the scenegraph.

# Constructor

Argument Description
message The String to be rendered to the scene.
x The position in the x direction for the object.
y The position in the y direction for the object.
styles An object where styles are applied. Attribute must exist in Two.Text.Properties.

# Ratio

Approximate aspect ratio of a typeface's character width to height.

# Properties

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

# Measure

Returns: Object

  • The width and height of the Two.Text instance.
Argument Description
text The instance of Two.Text to measure.

# value

The characters to be rendered to the the screen. Referred to in the documentation sometimes as the message.

# family

The font family Two.js should attempt to register for rendering. The default value is 'sans-serif'. Comma separated font names can be supplied as a "stack", similar to the CSS implementation of font-family.

# size

The font size in Two.js point space. Defaults to 13.

# leading

The height between lines measured from base to base in Two.js point space. Defaults to 17.

# alignment

Alignment of text in relation to Two.Text.translation's coordinates. Possible values include 'left', 'center', 'right'. Defaults to 'center'.

# baseline

The vertical aligment of the text in relation to Two.Text.translation's coordinates. Possible values include 'top', 'middle', 'bottom', and 'baseline'. Defaults to 'baseline'.

nota-bene

In headless environments where the canvas is based on https://github.com/Automattic/node-canvas (opens new window), baseline seems to be the only valid property.

# style

The font's style. Possible values include 'normal', 'italic'. Defaults to 'normal'.

# weight

A number at intervals of 100 to describe the font's weight. This compatibility varies with the typeface's variant weights. Larger values are bolder. Smaller values are thinner. Defaults to '500'.

# decoration

String to delineate whether text should be decorated with for instance an 'underline'. Defaults to 'none'.

# direction

String to determine what direction the text should run. Possibly values are 'ltr' for left-to-right and 'rtl' for right-to-left. Defaults to 'ltr'.

# fill

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

# linewidth

The thickness in pixels of the stroke.

# opacity

The opaqueness of the text object.

nota-bene

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

# visible

Display the text object 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.

# mask

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

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

Object to define clipping area.

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

# 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.Text.dashes display.

# clone

Returns: Two.Text

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

Create a new instance of Two.Text with the same properties of the current text object.

# toObject

Returns: Object

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

# noFill

Short hand method to set fill to none.

# noStroke

Short hand method to set stroke to none.

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