Presentation by Bob McCune of TapHarmonic detailing how to use the Quartz (CoreGraphics) framework with Swift 3. Sample code available here: https://github.com/tapharmonic/QuartzDemosSwift

1. @bobmccune
Bob McCune
Quartz 2D
with Swift 3

2. -Overview of the Quartz framework
- What is it?
- When do you need it?
-Core capabilities of framework:
- Contexts and Paths
- Drawing lines, curves, and images
- Applying transformations
-Recipes and Examples
Agenda
What will I learn?

3. What is Quartz?

4. -Apple’s 2D drawing framework based on the PDF imaging model
-Graphics API to produce lines, curves, transforms, gradients, etc.
-Uses painters model for drawing operations
What is Quartz 2D?
Wasn’t this supposed to be about Core Graphics?
Drawing Order Result

5. -Prefer to build your UI using images
- Better performance and caching
- Easier to create and maintain
- Keeps your graphics designers employed
-It’s best to design your UI using images…
When do I need it?
Isn’t this what graphics designers are for?
...until you can’t

9. Getting Started

10. Objective-C
CGContext *context = [[CGContext alloc] init];
[context moveToPoint:CGPointMake(12.0f, 12.0f)];
[context addLineToPoint:CGPointMake(24.0f, 24.0f)];
[context fill];
Understanding the Syntax
Dude, where’s my objects?

11. Understanding the Syntax
Dude, where’s my objects?
Objective-C
CGContext *context = [[CGContext alloc] init];
[context moveToPoint:CGPointMake(12.0f, 12.0f)];
[context addLineToPoint:CGPointMake(24.0f, 24.0f)];
[context fill];
Standard C
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(context, 12.0f, 12.0f);
CGContextAddLineToPoint(context, 24.0f, 24.0f);
CGContextFillPath(context);
Quartz not an Objective-C API

12. Understanding the Syntax
Dude, where’s my objects?
Standard C
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(context, 12.0f, 12.0f);
CGContextAddLineToPoint(context, 24.0f, 24.0f);
CGContextFillPath(context);
Swift 2
let context = UIGraphicsGetCurrentContext()!
CGContextMoveToPoint(context, 12.0, 12.0)
CGContextAddLineToPoint(context, 24.0, 24.0)
CGContextFillPath(context)

13. Understanding the Syntax
Dude, where’s my objects?
Swift 3
let context = UIGraphicsGetCurrentContext()!
context.move(to: CGPoint(x: 12.0, y: 12.0))
context.addLine(to: CGPoint(x: 24.0, y: 24.0))
context.fillPath()
Swift 2
let context = UIGraphicsGetCurrentContext()!
CGContextMoveToPoint(context, 12.0, 12.0)
CGContextAddLineToPoint(context, 24.0, 24.0)
CGContextFillPath(context)
Session 403: Swift API Design Guidelines (WWDC 2016)

14. Graphics Contexts

15. -Graphics context provides the drawing area
-Manages core drawing states:
- Colors, line widths, transforms, etc.
- It’s a state machine
-Key Quartz Contexts:
- CGContext
- CGBitmapContext
- CGPDFContext
Quartz Graphics Contexts
The Canvas

16. -Current Transformation Matrix (CTM) defines the coordinate system
-Coordinate system varies on macOS and iOS/tvOS
Quartz Coordinate System
Drawing Orientation
0, 0
y
x
Positive 0, 0
y
x
Positive
macOS iOS and tvOS

17. -Drawing is defined in terms
of points
-Points are abstract,
infinitely thin
-Points live in User Space
CGContext Drawing
Quartz Points
p0
p1

18. Points are Device-Independent
Think in points not pixels
H: 70 L:46
Sunny
Cupertino
66
p0
p1

19. -CGContext is the default drawing context
- Created by UIKit and AppKit
-Get a reference to it:
CGContext Drawing
CGContext
let context = UIGraphicsGetCurrentContext()
iOS and tvOS
let context = NSGraphicsContext.current()?.graphicsPort
macOS

20. Getting Started
Where do I draw?

21. Getting Started
Where do I draw?

22. Getting Started
Where do I draw?

23. Getting Started
Where do I draw?
class HelloQuartzViewController: UIViewController {
func drawBackground(recognizer: UIGestureRecognizer) {
}
}
let context = UIGraphicsGetCurrentContext()
context?.setFillColor(randomColor())
context?.fill(view.bounds)

24. Getting Started
Where do I draw?
class HelloQuartzView: UIView {
override func draw(_ rect: CGRect) {
}
}
class HelloQuartzViewController: UIViewController {
func drawBackground(recognizer: UIGestureRecognizer) {
}
}
let context = UIGraphicsGetCurrentContext()
context?.setFillColor(randomColor())
context?.fill(view.bounds)

25. Getting Started
Where do I draw?
class HelloQuartzView: UIView {
override func draw(_ rect: CGRect) {
}
}
class HelloQuartzViewController: UIViewController {
func drawBackground(recognizer: UIGestureRecognizer) {
}
}
let context = UIGraphicsGetCurrentContext()
context?.setFillColor(randomColor())
context?.fill(view.bounds)
// Trigger call to HelloQuartzView's draw(:) method
helloView.setNeedsDisplay()

26. Basic Paths

27. CGContext Drawing
Defining Paths
(0, 0)
(100, 100)
let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
context.addRect(rect)

28. CGContext Drawing
Defining Paths
(0, 0)
(100, 100)
let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
context.addEllipse(in: rect)

29. CGContext Drawing
Defining Paths
(0, 0)
(100, 100)
context.setStrokeColor(white)
context.drawPath(using: .stroke)

30. CGContext Drawing
Defining Paths
(0, 0)
(100, 100)
context.setFillColor(yellow)
context.drawPath(using: .fill)

31. CGContext Drawing
Defining Paths
(0, 0)
(100, 100)
context.drawPath(using: .fillStroke)

32. -Colors must be defined on the context before drawing
-Fill Colors
- setFillColor(color: CGColor)
- setFillColor(gray: CGFloat, alpha: CGFloat)
- setFillColor(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)
-Stroke Colors
- setStrokeColor(color: CGColor)
- setStrokeColor(gray: CGFloat, alpha: CGFloat)
- setStrokeColor(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)
Defining Colors
CGColor

33. - CGColor is the native Quartz color type
- UIColor is the native UIKit color type
-Use UIColor in almost all cases
- Easier to create
- Named color initializers
- Easy to convert to and from CGColor
Defining Colors
CGColor vs UIColor
// Convert to Quartz Type
let cgColor = UIColor.red.cgColor
context.setFillColor(cgColor)
// Convert to UIKit Type
let uiColor = UIColor(cgColor: cgColor)

34. -Lines are the most essential primitive
-Lines are always defined by their endpoints
-Basic Recipe:
1. Begin a new path
2. Move to initial starting point
3. Add lines defining shape
4. Close the path (optional)
5. Draw Path
Drawing Lines
Defining Paths

35. CGContext Drawing
Constructing Paths
context.beginPath()
context.move(to: .zero)

36. CGContext Drawing
Constructing Paths
context.addLine(to: CGPoint(x: 0.0, y: 4.0))

37. Constructing Paths
CGContext Drawing
context.addLine(to: CGPoint(x: 4.0, y: 4.0))

38. CGContext Drawing
Constructing Paths
context.addLine(to: CGPoint(x: 4.0, y: 0.0))

39. CGContext Drawing
Constructing Paths
context.closePath()

40. CGContext Drawing
Constructing Paths
let whiteColor = UIColor.white
context.setFillColor(whiteColor.cgColor)

41. CGContext Drawing
Constructing Paths
context.drawPath(using: .fill)

42. Advanced Paths

43. -Arcs define circle segments
-Arcs are defined with the following:
- Center x, y coordinates
- Radius
- Start and stop angles (in radians)
- Direction (clockwise or counter-clockwise)
-Created using:
- addArc(center:radius:startAngle:endAngle:clockwise:)
- addArc(tangent1End:tangent2End:radius:)
Drawing Arcs
Constructing Paths

44. -Arc functions are not aware of flipped coordinate system
- Need to think upside down (or)
- Transform coordinate system before using
- UIBezierPath wraps Quartz GGPath functionality
- Access to underlying path with CGPath property
-Generally easier to use UIBezierPath on iOS and tvOS
- * In Swift 3, direct Quartz usages is very similar
UIBezierPath
More iOS/tvOS-friendly solution

45. Drawing Arcs
Defining Paths
let path = UIBezierPath(arcCenter: centerPoint, radius: radius,
startAngle: 0, endAngle: degreesToRadians(270.0),
clockwise: false)
path.addLine(to: centerPoint)
context.addPath(path.cgPath)

46. Quadratic Bézier Curves
Constructing Paths
p0
context.beginPath()
context.move(to: p0)

47. Quadratic Bézier Curves
Constructing Paths
p0
p1
cp
context.addQuadCurve(to: p1, control: controlPoint)

48. Quadratic Bézier Curves
Constructing Paths
p0
p1
cp
context.setLineWidth(2.0)
context.setStrokeColor(UIColor.green.cgColor)
context.strokePath()

49. Cubic Bézier Curves
Constructing Paths
p0
context.beginPath();
context.move(to: p0)

50. Cubic Bézier Curves
Constructing Paths
p0
cp1
p1
cp2
context.addCurve(to: p1,
control1: cp1,
control2: cp2)

51. Cubic Bézier Curves
Constructing Paths
p0
cp1
cp2
p1
-cp1
-cp2
let tx = CGAffineTransform(scaleX: -1, y: 1)
context.addCurve(to: p0,
control1: cp2.applying(tx),
control2: cp1.applying(tx))

52. Cubic Bézier Curves
Constructing Paths
p0
cp1
cp2
p1
cp1
-cp2
context.closePath()
context.setFillColor(UIColor.red.cgColor)
context.fillPath()

53. -Quartz uses fill rules to determine what’s inside and outside of a
path.
-Uses one of the following:
- Non-zero Winding Rule (Default)
- Even Odd Rule
Fill Rules
To fill, or not to fill

54. Transformations

55. -Affine transformations are essential to all graphics programming
regardless of platform
-Allow you to manipulate the coordinate system to translate,
scale, skew, and rotate
-Transform preserves collinearity of lines
Affine Transformations
Transforming the Coordinate System
X

56. -CTM can be modified with the following:
- translateBy(x:y:)
- scaleBy(x:y:)
- rotate(by:)
Current Transformation Matrix
Modifying the CTM

57. Translate
Moving the Origin Point
(0, 0)
(100, 100)

58. Translate
Moving the Origin Point
(0, 0)
(0, 0)
context.translateBy(x: 100, y: 100)

59. Scale
Scaling the Unit Size
(0, 0)
(200, 200)

60. Scale
Scaling the Unit Size
(0, 0)
(200, 200)
context.scaleBy(x: 2.0, y: 2.0)

61. Rotate
Rotating the Context
context.rotate(by: degreesToRadians(15))

62. Gradients

63. -A gradient is a fill that varies from one color to another
-Quartz supports two different gradient types
- Linear varies between two endpoints
- Radial varies between two radial endpoints
Gradients
Drawing Gradients
Linear Radial

64. -Gradients can be created using either:
- init(colorsSpace:colors:locations:)
- init(colorSpace:colorComponents:locations:)
-Both functions require the following:
- CGColorSpace
- Colors (components or array of CGColor)
- Array of CGFloat values defining gradient color stops
Creating a CGGradient
CGGradient

65. CGGradientRef
Building the gradient code
let startColor = UIColor.red
let endColor = UIColor.orange
let colors = [startColor.cgColor, endColor.cgColor] as CFArray
let locations: [CGFloat] = [0, 1]
let colorSpace = CGColorSpaceCreateDeviceRGB()
let gradient =
CGGradient(colorsSpace: colorSpace, colors: colors, locations: locations)!
let startPoint = CGPoint(x: rect.midX, y: rect.minY)
let endPoint = CGPoint(x: rect.midX, y: rect.maxY)
let opts = CGGradientDrawingOptions()
context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: opts)

66. Gradient Examples

67. Images

68. -Quartz has broad support for images
-Represented as CGImage
-Can be drawn using:
- draw(image:rect:)
- draw(image:rect:byTiling)
- CGBitmapContext allows for dynamically building image data
Working with Images
CGImage

69. -Don’t draw in Quartz. Use UIImageView.
-Choose UIImage over CGImage
- Easier to load and cache image content
- Provides methods for drawing
- Is aware flipped coordinate system
- UIImage provides a CGImage property
-Use CGImage for more advanced cases
- Cropping, scaling, masking
- Dynamic image creation
CGImage vs UIImage
Which should I use?

70. Using Image Masks
Hiding behind a mask

71. Using Image Masks
Hiding behind a mask
// Mask image created by toMask() extension
guard let maskImage = UIImage(named: “round_mask")?.cgImage?.toMask() else { return }
guard let jeffersonImage = UIImage(named: "jefferson")?.cgImage else { return }
if let masked = jeffersonImage.masking(maskImage) {
// Draw shadow to offset from background
let shadowOffset = CGSize(width: 1, height: 1)
let shadowColor = UIColor.darkGray.cgColor
context.setShadow(offset: shadowOffset, blur: 12, color: shadowColor)
let maskedImage = UIImage(cgImage: masked)
maskedImage.draw(in: drawingRect(for: maskedImage))
}

72. Cropping Images
cropping(to:)
let albumImage = UIImage(named: "vh1")!
let cropRect = CGRect(x: 20, y: 20, width: 200, height: 200)
if let cgImage = albumImage.cgImage?.cropping(to: cropRect) {
// Create new UIImage and use as needed
let eddieImage = UIImage(cgImage: cgImage)
}

73. -Quartz is a powerful drawing engine for Apple platforms
-Essential skill to master to build beautiful apps
-Quartz + Swift 3 = Awesome
Summary

74. Resources
Quartz 2D Programming Guide
http://developer.apple.com/
Programming with Quartz
David Gelphman
Bunny Laden