The Gradient object.
Example:Applying a linear gradient color containing evenly distributed color stops:
// Define two points which we will be using to construct
// the path and to position the gradient color:
var topLeft = view.center - [80, 80];
var bottomRight = view.center + [80, 80];
// Create a rectangle shaped path between
// the topLeft and bottomRight points:
var path = new Path.Rectangle({
topLeft: topLeft,
bottomRight: bottomRight,
// Fill the path with a gradient of three color stops
// that runs between the two points we defined earlier:
fillColor: {
gradient: {
stops: ['yellow', 'red', 'blue']
},
origin: topLeft,
destination: bottomRight
}
});
Example:Create a circle shaped path at the center of the view, using 40% of the height of the view as its radius and fill it with a radial gradient color:
var path = new Path.Circle({
center: view.center,
radius: view.bounds.height * 0.4
});
// Fill the path with a radial gradient color with three stops:
// yellow from 0% to 5%, mix between red from 5% to 20%,
// mix between red and black from 20% to 100%:
path.fillColor = {
gradient: {
stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
radial: true
},
origin: path.position,
destination: path.bounds.rightCenter
};
-
stops
The gradient stops on the gradient ramp.
- Type:
- Array of
GradientStop
objects
-
radial
Specifies whether the gradient is radial or linear.
- Type:
Boolean
-
clone()
- Returns:
Gradient
— a copy of the gradient
-
equals(gradient)
Checks whether the gradient is equal to the supplied gradient.
- Parameters:
gradient:
Gradient
- Returns:
Boolean
—true
if they are equal,false
otherwise