Nieuw in iOS 10: UIGraphicsRenderer

een paar jaar geleden /
Door Roelf

Als je ooit zelf UIImage-objecten hebt gemaakt van eigen afbeeldingen (die je bijvoorbeeld met UIBezierPath hebt getekend), herken je ongetwijfeld dat vervelende context-gedoe:

Eerst maak je een context met UIGraphicsBeginImageContext()
Dan doe je het tekenwerk.
Dan maak je er een UIImage van, met UIGraphicsGetImageFromCurrentImageContext().
Dan verwijder je de context, met UIGraphicsEndImageContext().

Daar ben je met iOS 10 van verlost. Het maken van een UIImage op basis van je eigen tekening is werkelijk heel eenvoudig geworden. Je maakt een tekenomgeving (een renderer) met de nieuwe UIGraphicsImageRenderer-class. Daarna doe je het tekenwerk en tot slot vraag je je renderer-object om een UIImage. Dat is alles:

Maak een object van de class UIGraphicsImageRenderer.
Doe het tekenwerk.
Vraag je object om een UIImage.

Het geheim: het tekenwerk doe je in een closure. Die closure verwacht één argument: de context, die automatisch voor je is aangemaakt. Al het Core Graphics-werk op de achtergrond is nu mooi object-georiënteerd gemaakt!

Onderstaande Playground demonstreert de nieuwe UIGraphicsImageRenderer-class. (Let op: deze Playground werkt alleen in Xcode 8!)

import UIKit
import PlaygroundSupport

func maakCirkel(straal: CGFloat, kleur: UIColor) -&gt; UIImage {
  let origin = CGPoint.zero
  let size = CGSize(width: straal * 2, height: straal * 2)
  let rect = CGRect(origin: origin, size: size)
  let renderer = UIGraphicsImageRenderer(size: size)

  return renderer.image { context in
    let path = UIBezierPath(ovalIn: rect)
    kleur.setFill()
    path.fill()
  }
}

let straal = CGFloat(100)
let cirkel = maakCirkel(straal: 50, kleur: UIColor.orange())
let imageView = UIImageView(image: cirkel)
// (de grijze tint van de Playground-timeline):
imageView.backgroundColor = UIColor(white: 1, alpha: 0.97)

PlaygroundPage.current.liveView = imageView

import UIKit

import PlaygroundSupport

func maakCirkel(straal: CGFloat, kleur: UIColor) -> UIImage {

let origin = CGPoint.zero

let size = CGSize(width: straal * 2, height: straal * 2)

let rect = CGRect(origin: origin, size: size)

let renderer = UIGraphicsImageRenderer(size: size)

return renderer.image { context in

let path = UIBezierPath(ovalIn: rect)

kleur.setFill()

path.fill()

}

let straal = CGFloat(100)

let cirkel = maakCirkel(straal: 50, kleur: UIColor.orange())

let imageView = UIImageView(image: cirkel)

// (de grijze tint van de Playground-timeline):

imageView.backgroundColor = UIColor(white: 1, alpha: 0.97)

PlaygroundPage.current.liveView = imageView

Rechts, op de Timeline (druk op ⌘⌥Enter) zie je de zojuist gemaakte UIImage.

Let ook even op een paar nieuwigheden in Swift 3, iOS 10 en Xcode 8:

Het eerste argument van een functie heeft nu altijd een externe naam (tenzij je expliciet opgeeft dat dit niet zo moet zijn). Dus: maakCirkel(straal: CGFloat, kleur: UIColor) in plaats van maakCirkel(_: CGFloat, kleur: UIColor).
CGPointZero is niet meer. CGPoint is nu een ‘echt’ datatype geworden met een .zero-property.
Je kunt de UIColor-class nog steeds gebruiken om ‘standaardkleuren’ te maken, maar het overbodige ‘color’ laat je nu weg. UIColor.orangeColor() is nu dus UIColor.orange() geworden.
Het XCPlayground-framework is verouderd en vervangen door een nieuw framework: PlaygroundSupport. Bij dat framework hoort ook een vervanger van de XCPlayground-class: PlaygroundPage.