API Docs for: 6.0.1
Show:

Pattern Class

Extends Base
Module: scrawlImages

Pattern

Instantiation

  • scrawl.makePattern()

Purpose

  • Defines a pattern
  • Used with entity.strokeStyle and entity.fillStyle attributes

Note that a pattern image will always start at the entity's rotation/reflection (start vector) position, extending in all directions. To move a entity over a 'static' (cell-bound) pattern, more inventive solutions need to be found - for instance a combination of Picture entitys, dedicated cells and the 'source-in' globalCompositeOperation attribute.

Patterns are not restricted to images. A pattern can also be sourced from another cell (canvas element) or even a video element.

Access

  • scrawl.design.PATTERNNAME - for the Pattern design object

Constructor

Pattern

(
  • [items]
)

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Methods

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

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

getData

() private

Returns <canvas> element's contenxt engine's pattern object, or 'rgba(0,0,0,0)' on failure

Returns:

JavaScript pattern object, or String

getSourceType

()

Constructor/set helper

Returns:

String - one from: 'image', 'cell', 'video'; false on failure to identify source type

makeDesign

() private chainable

Builds <canvas> element's contenxt engine's pattern object

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

remove

()

Remove this pattern from the scrawl-canvas library

Returns:

Always true

set

(
  • items
)
chainable

Inherited from Base but overwritten in source\scrawlImages.js:455

Augments Base.set()

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

update

() chainable

Alias for Pattern.makeDesign()

Returns:

This

Properties

autoUpdate

Boolean

Drawing flag - when set to true, force the pattern to update each drawing cycle - only required in the simplest scenes where fillStyle and strokeStyle do not change between entities

Default: false

callback

Function

Asynchronous loading of image file from the server - function to run once image has successfully loaded

Used only with scrawl.makePattern() and Pattern.clone() operations. This attribute is not retained

Default: undefined

comment

String

Comment, for accessibility

Default: ''

name

String

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

repeat

String

Drawing parameter

Default: 'repeat'

source

String

CELLNAME, VIDEONAME or IMAGENAME of Pattern source data

Default: ''

timestamp

String

Creation timestamp

Default: ''

title

String

Title, for accessibility

Default: ''

type

String final

Inherited from Base but overwritten in source\scrawlImages.js:387

Default: 'Pattern'

url

String

Asynchronous loading of image file from the server - path/to/image file

Used only with scrawl.makePattern() and Pattern.clone() operations. This attribute is not retained

Default: ''