W2263 Gradients
Prerequisites[edit]
Introduction[edit]
Gradients may be used to fill paths (and other objects). Unlike solid colors where the value of each pixel is specified explicitly, when using a gradient the actual color of a pixel is calculated at each point through the use of a formula, based upon specified parameters.
Filling Paths With Gradients[edit]
Paths may be filled with gradients as follows:
- . Declare the gradient as a property of the painter
- . Create the gradient (there are two types, linear and radial) and specify the coordinates over which it will range
- . Create the colors for the gradient (using either standard CSS names or creating your own color via RGB)
- . Add the colors to the gradient specifying its "stop" position
- . Setup the gradient
- . Specify the fill mode for the path after ensuring that the gradient is ready
For example:
// Painter Properties
// Declare the gradient
let linearGradient : Gradient
required init() {
// Create the gradient and specify coordinates
let linearGradientMode = Gradient.Mode.linear(start:Point(x:0, y:0), end:Point(x:300, y:300))
// Create the colors for the gradient
linearGradient = Gradient(mode:linearGradientMode)
// Add the colors to the gradient specifying its "stop" position
let purple = Color(.purple)
let orange = Color(.orange)
linearGradient.addColorStop(ColorStop(position:0.0, color:purple))
linearGradient.addColorStop(ColorStop(position:1.0, color:orange))
}
override func setup(canvas:Canvas) {
// Set up the gradient
canvas.setup(linearGradient)
}
override func render(canvas:Canvas) {
// When rendering, specify the fillStyle
if let canvasSize = canvas.canvasSize,
linearGradient.isReady {
let fillStyle = FillStyle(gradient:linearGradient)
// Create path
let path = Path(fillMode:.fillAndStroke)
...
canvas.render(fillStyle, path)
}
Key Concepts[edit]
Exercises[edit]
![]() |
Exercises |
Getting started: john-williams@codermerlin:~/Projects$ git clone https://github.com/TheCoderMerlin/IgisShellD W2263
john-williams@codermerlin:~/Projects$ cd W2263/Sources/IgisShellD
john-williams@codermerlin:~/Projects$ cp ../../../W2262/Sources/IgisShellD/main.swift .
To compile: john-williams@codermerlin:~/Projects/W2263$ ./make.sh
To execute: john-williams@codermerlin:~/Projects/W2263$ ./run.sh
Your associated url will be: http://www.codermerlin.com/users/john-williams/dyn/index.html |