Class: Gradient

b5. Gradient

b5.Gradient

new b5.Gradient(name, colour_stops){b5.Gradient}

resource/gradient.js, line 44

A Gradient object is a brush that represents a collection of colours and offsets of those colours that form a gradient. Generally a Gradient should be added to either a scene or the global b5.App's resources so that it can be managed by them. Gradients are not used directly by b5.Actor's but they can be used to create stroke and fill styles for them.

Example showing how to create a gradient and use it to paint an Actor

 // Create a gradient
 var gradient = new b5.Gradient();
 gradient.addColourStop("#ff0000", 0);
 gradient.addColourStop("#00ff00", 0.5);
 gradient.addColourStop("#0000ff", 1);

 // Create an actor and assign the gradient fill style
 var actor = new b5.ArcActor();
 actor.x = -100;
 actor.w = 100;
 actor.radius = 100;
 actor.filled = true;
 actor.fill_style = gradient.createStyle(actor.w, actor.w, { x: 0, y: 0 }, { x: 1, y: 1 });;
 scene.addActor(actor);

A colour stop is an object of the form {number, colour}

For a complete overview of Resources see Booty5 Resources Overview

Name Type Description
name string

Name of gradient resource

colour_stops string

Optional list of colour stops

Properties:
Name Type Description
parent b5.App | b5.Scene

Parent resource manager (internal)

stops Array.<object>

Array of colour stops (internal)

name string

Name of this gradient resource

Returns:
Type Description
b5.Gradient The created Gradient

Methods

addColourStop(colour, offset)

resource/gradient.js, line 62

Adds a colour stop to the gradient

Name Type Description
colour object

A colour for example #ffffff

offset number

Gradient offset position

createStyle(w, h, start, end){object}

resource/gradient.js, line 103

Creates a style that can be used as strokes and fills when rendering a b5.Actor

Name Type Description
w number

Width of gradient

h number

Height of gradient

start object

Start x,y position of gradient

end object

End x,y position of gradient

Returns:
Type Description
object Gradient fill style

destroy()

resource/gradient.js, line 89

Removes this resource from its resource manager and destroys it

getColourStop(index){Object}

resource/gradient.js, line 72

Returns the colour stop at the specified index for this gradient

Name Type Description
index number

Index of colour stop

Returns:
Type Description
Object The colour stop

getMaxStops(){Number}

resource/gradient.js, line 81

Get the total number of colour stops in this gradient

Returns:
Type Description
Number Total number of gradient stops