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
radial
clone()
equals(gradient)
Copyright © 2020 Wenting Zhang | Built with Notion & Fruition
<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0d10a785-5dc5-44f5-ac4f-2eb80d24b302/Wentin_Logo.svg" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0d10a785-5dc5-44f5-ac4f-2eb80d24b302/Wentin_Logo.svg" width="40px" /> wentin.co
</aside>
<aside> <img src="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/twitter-512.png" alt="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/twitter-512.png" width="40px" /> Twitter
</aside>
<aside> <img src="https://image.flaticon.com/icons/png/512/25/25231.png" alt="https://image.flaticon.com/icons/png/512/25/25231.png" width="40px" /> Github
</aside>