Tiny.js

Class: TextStyle

Tiny. TextStyle

A TextStyle Object decorates a Text Object. It can be shared between
multiple Text objects. Changing the style will update all text objects using it.

new Tiny.TextStyle(style)

tiny/core/text/TextStyle.js, line 43
Name Type Description
style object

The style parameters

Name Type Default Description
align string 'left'

Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
breakWords boolean false

Indicates if lines can be wrapped within words, it needs wordWrap to be set to true
dropShadow boolean false

Set a drop shadow for the text
dropShadowAlpha number 1

Set alpha for the drop shadow
dropShadowAngle number Math.PI/6

Set a angle of the drop shadow
dropShadowBlur number 0

Set a shadow blur radius
dropShadowColor string '#000000'

A fill style to be used on the dropshadow e.g 'red', '#00FF00'
dropShadowDistance number 5

Set a distance of the drop shadow
fill string | array.<string> | number | array.<number> | CanvasGradient | CanvasPattern 'black'

A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient
eg ['#000000','#FFFFFF']
mdn
fillgradienttype number tiny.text_gradient.linear_vertical

if fill is an array of colours to create a gradient, this can change the type/direction of the gradient. see Tiny.TEXT_GRADIENT
fillGradientStops array.<number>

If fill is an array of colours to create a gradient, this array can set the stop points (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.
fontFamily string | array.<string> 'Arial'

The font family
fontSize number | string 26

The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')
fontStyle string 'normal'

The font style ('normal', 'italic' or 'oblique')
fontVariant string 'normal'

The font variant ('normal' or 'small-caps')
fontWeight string 'normal'

The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900')
letterSpacing number 0

The amount of spacing between letters, default is 0
lineHeight number

The line height, a number that represents the vertical space that a letter uses
lineJoin string 'miter'

The lineJoin property sets the type of corner created, it can resolve spiked text issues. Default is 'miter' (creates a sharp corner).
miterLimit number 10

The miter limit to use when using the 'miter' lineJoin mode. This can reduce or increase the spikiness of rendered text.
padding number 0

Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.
stroke string | number 'black'

A canvas fillstyle that will be used on the text stroke e.g 'blue', '#FCFF00'
strokeThickness number 0

A number that represents the thickness of the stroke. Default is 0 (no stroke)
trim boolean false

Trim transparent borders
textBaseline string 'alphabetic'

The baseline of the text that is rendered.
wordWrap boolean false

Indicates if word wrap should be used
wordWrapWidth number 100

The width at which text will wrap, it needs wordWrap to be set to true

Methods

clone() ❯ {Tiny.TextStyle}

tiny/core/text/TextStyle.js, line 86

Creates a new TextStyle object with the same values as this one.
Note that the only the properties of the object are cloned.

Returns:
Type Description
Tiny.TextStyle New cloned TextStyle object

reset()

tiny/core/text/TextStyle.js, line 99

Resets all properties to the defaults specified in TextStyle.prototype._default

toFontString() ❯ {string}

tiny/core/text/TextStyle.js, line 397

Generates a font style string to use for TextMetrics.measureFont().

Returns:
Type Description
string Font style string, for passing to TextMetrics.measureFont()
Documentation generated by JSDoc 3.4.3 on Thu May 31 2018 14:40:23 GMT+0800 (CST)