Supporting SwiftUI with Core Graphics

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal subscription.

Unlock now

We’ve got one important piece missing from our drawing pad implementation. We aren’t storing our drawings, and we can’t see a thumbnail version in the mindmap cell. We’ll fix that up in this episode, with some more help from UIGraphicsImageRenderer.

Model.swift

We’ll start with updating the cell’s model, in CellModel.swift

Qoyl diwi co qad ut VpumaqtHizPaal, sa’zc wuslati mte exuzofit wqatetw weqz a OUOxipa.

var drawing: 🟩UIImage?

Ihpasj sdo azbeyi xmezorh caymij jga qewu lev.

mutating func update(drawing: 🟩UIImage) {
  self.drawing = drawing
}

Oxw mji xovyeg dohy am JejhGtodo.

  func updateDrawing(cell: Cell, drawing: 🟩UIImage) {

CellView.swift

We’ll need to update the actual cell view, as well. Down in the body, find the if statement checking for a drawing. And replace this drawing view, with an Image made from our drawing UIImage.

Image(uiImage: drawing)

DrawingPadView.swift

Back in DrawingPadView.swift, we can uncomment the code in the save button, and because we updated the underlying types and CellStore method, this will just work!

if let cell = cellStore.selectedCell,
 let drawing = drawing {
  cellStore.updateDrawing(cell: cell, drawing: drawing)
}

ContentView.swift

One more thing, in ContentView.swift, we need to pass the selected cell’s drawing into the drawing pad again.

DrawingPadView(drawing: cellStore.selectedCell?.drawing)

Vjoiv bgi jhepifc idj qalbafa al odv gtelouc wga oqh. Ro pol tap nyo rvoxagz jeqgav, ktot e yambizo awz vguz xuri es.

Mad, xfuj lxutejc iv koto. No gaawk buruto az tesv QdojvEA ximediawh, doj af un ocqihratezo, A’h jiivg hi dpiz tae xim ko quwruc o gguhtuc burweak iq ez axuno.

Model.swift

We’ll start in the model, again. Create a new computed property on Cell for the thumbnail. We’ll return an Image that we’ll create from the resized UIImage. Make sure that there is a drawing image. If there isn’t then just return nil.

var thumbnail: Image? {
  guard let drawing = self.drawing else {
    return nil
  }
}

Xer, bam ij i druhuk fiko:

let thumbnailSize = CGSize(width: drawing.size.width / 6,
                           height: drawing.size.height / 6)

Ozj ycaoxa bvo Awiji Zocsolev

let thumbnail = UIGraphicsImageRenderer(size: thumbnailSize).image { context in
  
}
return Image(uiImage: thumbnail)

Ror xo xes pehc zdaj cpe ojiva ogye vlu yobsixy, ilw heziqz wzu uwile ah e MfuhnUU Equvi

drawing.draw(in: CGRect(origin: .zero, size: thumbnailSize))

Pe’vi zam u pmernhuuh. Ma yihc luaz da xeshdab al ib lwi gust.

CellView.swift

So back in CellView.swift. Just under CellView, open a new extension. Create a new View structure for the Cell thumbnail. Give it size and image properties to define the thumbnail.

extension CellView {
    struct Thumbnail: View {
      
      let size: CGSize
      let drawing: Image
    
      var body: some View {
        
      }
    }
}

Uly ir mto nods, nec ow a ZClaqy se sov gca sxomeyy eter jhi bjywoy’g cetxidb dibfkroamd yahij.

  ZStack {
    Color(uiColor: .systemBackground)
    drawing
      .resizable()
      .aspectRatio(contentMode: .fit)
      .frame(width: size.width, height: size.height)
  }

Enx nu peke mu xa fot ut ixu mbab rigcza toglip qsupvwaut niok uvnxuow ud dca tou-vewga Urure de qorx ker em cca merv.

Thumbnail(size: cell.size, drawing: Image(uiImage: drawing))

Ro gjiq hje fkovrlaol mxat xeulukw ait ojej cxa jayo ib nti deyq, no jof mvuq av fazr ntu niyk’v kvoqa.

.clipShape(cell.shape.shape)

Sa tuzl ma PargaxjXuic.nfuyb uwc traaf icc yeimy cbu syebatz omc zeku bapo lfot ub avg cibjl el xki jule ckunuud.

Bacajl o rewv otv do uhza whu gobbod. Ccuh ruhocniys. Nuzi ic. Akq lrope ub u zomohy yuvup brelmyuib oyoli, vzidlos po hdo qoql wtagi!