Episode #287 | 7 minutes | published on July 14, 2017 | Uses swift-3.0, Xcode-8.3
Sam shows how to use Core Graphics to draw images, which you might want to do if you want to blend techniques we’ve seen so far, such as clipping paths or gradients. Drawing images with Core Graphics is also useful to resize images if needed (perhaps if the API is returning one that is too large and you want to cache a thumbnail on device). You’ll also learn about a handy function to help you with aspect ratio math!


Drawing an Image the Easy Way

If you can use UIKit and don't need a ton of customization, you can draw like this:

let image = #imageLiteral(resourceName: "Yosemite@2x.png")
image.draw(in: bounds)

This will draw the image in the current context.

Drawing the Hard Way

With Core Graphics you have more control over how the drawing happens. We’ll make use of a little-known function from AVFoundation called AVMakeRect. With this you can skip the aspect ratio math to make sure that you draw an image without stretching.


context.translateBy(x: bounds.midX, y: bounds.midY)
context.scaleBy(x: 1, y: -1)
context.translateBy(x: -bounds.midX, y: -bounds.midY)

let rect = AVMakeRect(aspectRatio: image.size, insideRect: bounds)
context.draw(image.cgImage!, in: rect)


context.draw(#imageLiteral(resourceName: "Underwater@2x.png").cgImage!, in: bounds)


Here we use the blend mode of .overlay, but you should play with the various blending modes and see what they do.

blog comments powered by Disqus