Booty5

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