Core Graphics Tutorial: Curves and Layers
In this tutorial, you will learn the Core Graphics drawing model and how it dictates the order that you draw your shapes. By Sanket Firodiya.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Core Graphics Tutorial: Curves and Layers
30 mins
Finishing the App
Congratulations! You made it this far! It’s now time to add the finishing touches to this future best seller.
For each change in emotion, the sky should reflect that state. Each swipe on the scroll view resets the rage level in SkyView
. Make the following changes to reflect such inner turmoil. :]
Replace drawSky(in:context:colorSpace:)
with the following:
private func drawSky(in rect: CGRect, rageLevel: RageLevel, context: CGContext,
colorSpace: CGColorSpace) {
let baseColor: UIColor
let middleStop: UIColor
let farStop: UIColor
switch rageLevel {
case .happy:
baseColor = UIColor(red: 0 / 255.0, green: 158.0 / 255.0,
blue: 183.0 / 255.0, alpha: 1.0)
middleStop = UIColor(red: 0.0 / 255.0, green: 255.0 / 255.0,
blue: 252.0 / 255.0, alpha: 1.0)
farStop = UIColor(red: 255.0 / 255.0, green: 255.0 / 255.0,
blue: 255.0 / 255.0, alpha: 1.0)
case .somewhatHappy:
baseColor = UIColor(red: 0 / 255.0, green: 158.0 / 255.0,
blue: 183.0 / 255.0, alpha: 1.0)
middleStop = UIColor(red: 144.0 / 255.0, green: 152.0 / 255.0,
blue: 253.0 / 255.0, alpha: 1.0)
farStop = UIColor(red: 96.0 / 255.0, green: 111.0 / 255.0,
blue: 144.0 / 255.0, alpha: 1.0)
case .neutral:
baseColor = UIColor(red: 148.0 / 255.0, green: 158.0 / 255.0,
blue: 183.0 / 255.0, alpha: 1.0)
middleStop = UIColor(red: 127.0 / 255.0, green: 138.0 / 255.0,
blue: 166.0 / 255.0, alpha: 1.0)
farStop = UIColor(red: 96.0 / 255.0, green: 111.0 / 255.0,
blue: 144.0 / 255.0, alpha: 1.0)
case .somewhatAngry:
baseColor = UIColor(red: 255.0 / 255.0, green: 147.0 / 255.0,
blue: 167.0 / 255.0, alpha: 1.0)
middleStop = UIColor(red: 127.0 / 255.0, green: 138.0 / 255.0,
blue: 166.0 / 255.0, alpha: 1.0)
farStop = UIColor(red: 107.0 / 255.0, green: 107.0 / 255.0,
blue: 107.0 / 255.0, alpha: 1.0)
case .angry:
baseColor = UIColor(red: 255.0 / 255.0, green: 0 / 255.0,
blue: 0 / 255.0, alpha: 1.0)
middleStop = UIColor(red: 140.0 / 255.0, green: 33.0 / 255.0,
blue: 33.0 / 255.0, alpha: 1.0)
farStop = UIColor(red: 0 / 255.0, green: 0 / 255.0,
blue: 0 / 255.0, alpha: 1.0)
}
context.saveGState()
defer { context.restoreGState() }
let gradientColors = [baseColor.cgColor, middleStop.cgColor, farStop.cgColor]
let locations: [CGFloat] = [0.0, 0.1, 0.25]
let startPoint = CGPoint(x: rect.size.height/2, y: 0)
let endPoint = CGPoint(x: rect.size.height/2, y: rect.size.width)
if let gradient = CGGradient.init(colorsSpace: colorSpace,
colors: gradientColors as CFArray,
locations: locations) {
context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: [])
}
}
This simply adds in a rageLevel:
parameter to the function and then changes the colors of the gradient depending on that parameter value.
Next, replace the call to drawSky(in:context:colorSpace:)
in draw(_:)
with the following:
drawSky(in: rect, rageLevel: rageLevel, context: context, colorSpace: colorSpace)
You’re now passing in the rageLevel
to drawSky(in:rageLevel:context:colorSpace:)
.
Build and run, then swipe through the different faces. Challenge dominated! Hello five star rating! :]
Where to Go From Here
By this point, you should have a firm grasp of the fundamentals of Core Graphics and should be well on your way to using it in your own projects.
If you’re interested in learning more about the UIKit Drawing System, go through Apple’s excellent UIKIT Drawing System resource.
Also check out our Arcs and Paths tutorial, which builds on the knowledge you’ve acquired in this tutorial and focuses on drawing arcs and other geometric shapes.
You may also want to check our Lines, Rectangles, and Gradients tutorial, which covers gradients and drawing lines and rectangles using Core Graphics.
I hope you found this tutorial useful. Please share any comments or questions in the forum discussion below!