# Two.Text

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.

text.js:316

# Properties

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

text.js:322

# Measure

Returns: Object

The width and height of the Two.Text instance.

Argument	Description
text	The instance of Two.Text to measure.

text.js:345

# fromObject

Returns: Two.Text

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

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

text.js:381

nota-bene

Works in conjunction with Two.Text.toObject

# value

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

text.js:154

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

text.js:160

# size

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

text.js:166

# leading

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

text.js:172

# alignment

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

text.js:178

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

text.js:184

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

text.js:191

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

text.js:197

# decoration

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

text.js:203

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

text.js:209

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

text.js:215

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

text.js:222

# linewidth

The thickness in pixels of the stroke.

text.js:229

# opacity

The opaqueness of the text object.

text.js:235

nota-bene

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

# visible

Display the text object or not.

text.js:242

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.

text.js:249

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.

text.js:256

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.

text.js:290

# dashes.offset

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

text.js:298

# copy

Argument	Description
text

Copy the properties of one Two.Text onto another.

text.js:405

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

text.js:424

# toObject

Returns: Object

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

text.js:453

nota-bene

Works in conjunction with Two.Text.fromObject

# dispose

Returns: Two.Text

Release the text's renderer resources and detach all events. This method disposes fill and stroke effects (calling dispose() on Gradients and Textures for thorough cleanup) while preserving the renderer type for potential re-attachment to a new renderer.

text.js:472

# noFill

Short hand method to set fill to none.

text.js:502

# noStroke

Short hand method to set stroke to none.

text.js:512

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

text.js:527

← Two.Path Two.Group →