Reading time: 2 min

This recipe shows how to let your users draw with mouse/finger in SwiftUI.

The result will look like this:

The recipe goes like this:

1. Create a model to hold your drawing data.
2. Collect drawing data using DragGesture.
3. Render the data with a custom Shape.

OK, so the first step is create a struct to hold your drawing data. It contains the points which the user went through while drawing, as well a breaks that they took when they lifted their finger/mouse up:

struct DrawingPath {
  private var points = [CGPoint]()
  private var breaks = [Int]()

  mutating func addPoint(_ point: CGPoint) {
    points.append(point)
  }

  mutating func addBreak() {
    breaks.append(points.count)
  }
}

Next, use DragGesture to obtain drawing data - points in onChanged and breaks in onEnded:

struct DrawViewTest: View {
  @State private var drawing: DrawingPath

  var body: some View {
    ZStack {
      Color.white // drawing background
      // WE'LL ADD THE DRAWING SHAPE HERE
   }.gesture(DragGesture()
     .onChanged( { value in
       drawing.addPoint(value.location)
     }).onEnded( { value in
       drawing.addBreak()
     }))
  }
}

Lastly, here's a Shape that turns DrawingPath data into a SwiftUI Path:

extension DrawingPath {
  var path: Path {
    var path = Path()
    guard let firstPoint = points.first else { return path }
    path.move(to: firstPoint)
    for i in 1..<points.count {
      if breaks.contains(i) {
        path.move(to: points[i]) // jump after breaks
      } else {
        path.addLine(to: points[i]) // connect points otherwise
      }
    }
    return path
  }
}

struct DrawShape: Shape {
  let drawingPath: DrawingPath

  func path(in rect: CGRect) -> Path {
    drawingPath.path
  }
}

Then just update the DrawViewTest's body to make use of DrawShape:

  var body: some View {
    ZStack {
      Color.white // drawing background
      DrawShape(drawingPath: drawing)
        .stroke(lineWidth: 5) // define stroke width
        .foregroundColor(.blue) // define stroke color

    // ... the rest as it was before

Next Post Previous Post