API Docs for: 6.0.1
Show:

RadialGradient Class

Extends Design
Module: scrawlCore

RadialGradient

Instantiation

  • scrawl.makeRadialGradient()

Purpose

  • Defines a radial gradient
  • Used with entity.strokeStyle and entity.fillStyle attributes

Access

  • scrawl.design.RADIALGRADIENTNAME - for the RadialGradient object

Constructor

RadialGradient

(
  • [items]
)

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Methods

animationInit

() private

Starts the animation loop

animationLoop

()

The Scrawl animation loop

Animation loop is invoked automatically as part of the initialization process

Scrawl will run all Animation objects whose ANIMATIONNAME Strings are included in the scrawl.animate Array

All animation can be halted by setting the scrawl.doAnimation flag to false

To restart animation, either call scrawl.initialize(), or set scrawl.doAnimation to true and call __scrawl.animationLoop()

Returns:

Recursively calls itself - never returns

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

makeAnimation

(
  • items
)

A factory function to generate new Animation objects

Parameters:

  • items Object

    Key:value Object argument for setting attributes

Returns:

Animation object

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

newAnimation

() deprecated

Alias for makeAnimation()

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

sortAnimations

() private

Animation sorting routine - animation objects are sorted according to their animation.order attribute value, in ascending order

Returns:

Nothing

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

doAnimation

Boolean

Animation flag: set to false to stop animation loop

endRadius

Number (by default), or String percentage value

End circle radius, in pixels or percentage of entity/cell width

Default: 0 (though in practice, an undefined end radius will default to the entity's width, or the cell's width)

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

orderAnimations

Boolean

Animation ordering flag - when set to false, the ordering of animations is skipped; default: true

Default: true

startRadius

Number (by default), or String percentage value

Start circle radius, in pixels or percentage of entity/cell width

Default: 0

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:8430

Default: 'RadialGradient'