API Docs for: 6.0.1
Show:

Design Class

Extends Base
Module: scrawlCore

Design

Instantiation

  • This object should never be instantiated by users

Purpose

  • Defines gradients and radial gradients used with entity objects' strokeStyle and fillStyle attributes

Constructor

Design

(
  • [items]
)

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Methods

applyStops

() private chainable

Design.update() helper function - applies color attribute objects to the gradient

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

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 gradient object, or 'rgba(0,0,0,0)' on failure

Returns:

JavaScript Gradient object, or String

makeGradient

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

Design.update() helper function - builds <canvas> element's contenxt engine's gradient object

Parameters:

  • [entity] String optional

    SPRITENAME String

  • [cell] String optional

    CELLNAME String

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 gradient from the scrawl library

Returns:

Always true

set

(
  • items
)
chainable

Inherited from Base but overwritten in source\scrawlCore.js:8046

Update values to Number attributes

Will also accept an object containing start and end attributes, each of which can include x, y, startX, startY, r, startRadius and/or endRadius attributes

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

setDelta

(
  • items
)
chainable

Add values to Number attributes

Parameters:

  • items Object

    Object consisting of key:value attributes

Returns:

This

update

(
  • [entity]
  • [cell]
)
chainable

Creates the gradient

This function is replaced by the animation extension

Parameters:

  • [entity] String optional

    SPRITENAME String

  • [cell] String optional

    CELLNAME String

Returns:

This

Properties

autoUpdate

Boolean

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

Default: false

cell

String

CELLNAME String of <canvas> element context engine on which the gradient has been set

Default: ''

color

Array of JavaScript objects

Array of JavaScript Objects representing color stop data

Objects take the form {color:String, stop:Number} where:

  • color attribute can be any legitimate CSS color string
  • __stop can be any number between O and 0.999999 (not 1)

Default: [{color: 'black', stop: 0},{color: 'white', stop: 0.999999}]

comment

String

Comment, for accessibility

Default: ''

endX

Number

Horizontal end coordinate, in pixels, from the top-left corner of the gradient's <canvas> element

Default: 0

endY

Number

Vertical end coordinate, in pixels, from the top-left corner of the gradient's <canvas> element

Default: 0

lockTo

String - or alternatively Boolean

Drawing flag - when set to 'entity' (or true), will use entity-based coordinates to calculate the start and end points of the gradient; when set to 'cell' (or false - default), will use Cell-based coordinates

Default: 'cell'

name

String

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

startX

Number

Horizontal start coordinate, in pixels, from the top-left corner of the gradient's <canvas> element

Default: 0

startY

Number

Vertical start coordinate, in pixels, from the top-left corner of the gradient's <canvas> element

Default: 0

timestamp

String

Creation timestamp

Default: ''

title

String

Title, for accessibility

Default: ''

type

String final

Inherited from Base but overwritten in source\scrawlCore.js:7974

Default: 'Design'