API Docs for: 6.0.1
Show:

Text Class

Extends Base
Module: scrawlPhrase

Text

Instantiation

  • This object should never be instantiated by users
  • Objects created via Phrase object

Purpose

  • Display single lines of text within a Phrase, or along a Shape path
  • Each time the Phrase object text changes, the associated Text objects are destroyed and regenerated from scratch

Constructor

Text

(
  • [items]
)
private

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Methods

clear

(
  • ctx
  • cell
  • x
  • y
)
private chainable

Stamp helper function - perform a 'clear' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • x Number

    Glyph horizontal coordinate

  • y Number

    Glyph vertical coordinate

Returns:

This

clearWithBackground

(
  • ctx
  • cell
  • x
  • y
)
private chainable

Stamp helper function - perform a 'clearWithBackground' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • x Number

    Glyph horizontal coordinate

  • y Number

    Glyph vertical coordinate

Returns:

This

clip

(
  • ctx
  • cell
  • x
  • y
)
private chainable

Stamp helper function - perform a 'clip' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • x Number

    Glyph horizontal coordinate

  • y Number

    Glyph vertical coordinate

Returns:

This

clipAlongPath

() private chainable

Filter function - prepare the clip for the filter

Returns:

This

clone

(
  • items
)
chainable

Clone a Scrawl.js object, optionally altering attribute values in the cloned object

Note that any callback or fn attribute functions will be referenced by the clone, not copied to the clone; these can be overwritten with new anonymous functions by including them in the items argument object

(This function is replaced by the path extension)

Parameters:

  • items Object

    Object containing attribute key:value pairs; will overwrite existing values in the cloned, but not the source, Object

Returns:

Cloned object

Example:

var box = scrawl.makeBlock({
    width: 50,
    height: 50
    });
var newBox = box.clone({
    height: 100
    });
newBox.get('width');        //returns 50
newBox.get('height');       //returns 100

draw

(
  • ctx
  • cell
  • x
  • y
)
private chainable

Stamp helper function - perform a 'draw' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • x Number

    Glyph horizontal coordinate

  • y Number

    Glyph vertical coordinate

Returns:

This

drawFill

(
  • ctx
  • cell
  • x
  • y
  • p
)
private chainable

Stamp helper function - perform a 'drawFill' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • x Number

    Glyph horizontal coordinate

  • y Number

    Glyph vertical coordinate

  • p Phrase

    Parent Phrase entity object

Returns:

This

fill

(
  • ctx
  • cell
  • x
  • y
)
private chainable

Stamp helper function - perform a 'fill' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • x Number

    Glyph horizontal coordinate

  • y Number

    Glyph vertical coordinate

Returns:

This

fillDraw

(
  • ctx
  • cell
  • x
  • y
  • p
)
private chainable

Stamp helper function - perform a 'fillDraw' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • x Number

    Glyph horizontal coordinate

  • y Number

    Glyph vertical coordinate

  • p Phrase

    Parent Phrase entity object

Returns:

This

floatOver

(
  • ctx
  • cell
  • x
  • y
)
private chainable

Stamp helper function - perform a 'floatOver' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • x Number

    Glyph horizontal coordinate

  • y Number

    Glyph vertical coordinate

Returns:

This

get

(
  • item
)

Retrieve an attribute value. If the attribute value has not been set, then the default value for that attribute will be returned.

Parameters:

  • item String

    Attribute key

Returns:

Attribute value

Example:

var box = scrawl.makeBlock({
    width: 50,
    });
box.get('width');               //returns 50
box.get('height');              //returns 0
box.get('favouriteAnimal');     //returns undefined

getMetrics

() private chainable

Calculate metrics for each phrase, word or glyph in the glyphs array

Returns:

This

numberConvert

(
  • val
  • dim
)
private

Stamp helper function - convert string percentage values to numerical values

Parameters:

  • val String

    coordinate String

  • dim Number

    dimension value

Returns:

Number - value

parse

()

Turn the object into a JSON String

Returns:

object of object's currently set attributes

set

(
  • items
)
chainable

Set attribute values. Multiple attributes can be set in the one call by including the attribute key:value pair in the argument object.

An attribute value will only be set if the object already has a default value for that attribute. This restricts the ability of coders to add attributes to Scrawl objects.

Parameters:

  • items Object

    Object containing attribute key:value pairs

Returns:

This

Example:

var box = scrawl.makeBlock({
    width: 50,
    height: 50
    });
box.set({
    height: 100,
    favouriteAnimal: 'cat'
    });
box.get('width');               //returns 50
box.get('height');              //returns 100
box.get('favouriteAnimal');     //returns undefined

sinkInto

(
  • ctx
  • cell
  • x
  • y
)
private chainable

Stamp helper function - perform a 'sinkInto' method draw

Parameters:

  • ctx Object

    JavaScript context engine for Cell's <canvas> element

  • cell String

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

  • x Number

    Glyph horizontal coordinate

  • y Number

    Glyph vertical coordinate

Returns:

This

stampAlongPath

(
  • [method]
  • [cell]
)
private chainable

Stamp function - stamp phrases, words or individual glyphs (letters and spaces) along a Shape entity path

Permitted methods include:

  • 'draw' - stroke the entity's path with the entity's strokeStyle color, pattern or gradient
  • 'fill' - fill the entity's path with the entity's fillStyle color, pattern or gradient
  • 'drawFill' - stroke, and then fill, the entity's path; if a shadow offset is present, the shadow is added only to the stroke action
  • 'fillDraw' - fill, and then stroke, the entity's path; if a shadow offset is present, the shadow is added only to the fill action
  • 'floatOver' - stroke, and then fill, the entity's path; shadow offset is added to both actions
  • 'sinkInto' - fill, and then stroke, the entity's path; shadow offset is added to both actions
  • 'clear' - fill the entity's path with transparent color 'rgba(0, 0, 0, 0)'
  • 'clearWithBackground' - fill the entity's path with the Cell's current backgroundColor
  • 'clip' - clip the drawing zone to the entity's path (not tested)
  • 'none' - perform all necessary updates, but do not draw the entity onto the canvas

Parameters:

  • [method] String optional

    Permitted method attribute String; by default, will use entity's own method setting

  • [cell] String optional

    CELLNAME string of Cell to be drawn on; by default, will use the Cell associated with this entity's Group object

Returns:

This

Properties

comment

String

Comment, for accessibility

Default: ''

context

String private

CTXNAME String of parent Phrase object's Context object

Default: ''

fixedWidth

Boolean private

fixedWidth value of parent Phrase object

Default: false

glyphs

Array private

Glyphs array

Default: []

glyphWidths

Array private

Glyph widths array

Default: []

height

Number private

Text line height, accounting for font, scale, lineHeight, etc

Default: 0

name

String

Unique identifier for each object; default: computer-generated String based on Object's type

phrase

String private

PHRASENAME String of parent Phrase object

Default: ''

text

String private

Text to be displayed

Default: ''

textAlongPath

String private

Text along path value of parent Phrase object

Default: 'phrase'

timestamp

String

Creation timestamp

Default: ''

title

String

Title, for accessibility

Default: ''

type

String final

Inherited from Base but overwritten in source\scrawlPhrase.js:947

Default: 'Text'

width

Number private

Text line width, accounting for font, scale, etc

Default: 0