top of page

Using the PencilKit Framework with SwiftUI

Are you ready to take your SwiftUI app to the next level? With the PencilKit framework, you can add drawing and handwriting capabilities to your app. And don’t worry, I’ll be adding some light jokes to keep things interesting.


First things first, let’s talk about what the PencilKit framework is. PencilKit is a framework that allows users to draw, sketch, and write using the Apple Pencil. It provides a set of tools and APIs that allow developers to easily add drawing and handwriting capabilities to their apps.

Here’s a little joke for you: Why did the programmer quit his job? Because he didn’t get arrays! Okay, maybe that was a bit of a stretch. Let’s get back to PencilKit.


To use PencilKit with SwiftUI, we need to create a PKCanvasView and add it to our view hierarchy. We can then use the PKToolPicker to allow users to select different drawing tools and colors.


Here’s an example of how to use PencilKit in a SwiftUI app:

import SwiftUI
import PencilKit

struct DrawingView: UIViewRepresentable {
    func makeUIView(context: Context) -> PKCanvasView {
        let canvasView = PKCanvasView()
        canvasView.drawingPolicy = .anyInput
        canvasView.tool = PKInkingTool(.pen, color: .black, width: 10)
        return canvasView
    }

    func updateUIView(_ uiView: PKCanvasView, context: Context) {}

    typealias UIViewType = PKCanvasView
}

struct ContentView: View {
    @State private var isDrawing = false

    var body: some View {
        ZStack {
            DrawingView()
            VStack {
                Spacer()
                Button("Toggle Drawing") {
                    isDrawing.toggle()
                }
                .padding()
                .background(Color.white)
                .cornerRadius(10)
            }
        }
        .edgesIgnoringSafeArea(.all)
        .sheet(isPresented: $isDrawing) {
            PKCanvasViewWrapper()
        }
    }
}

struct PKCanvasViewWrapper: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
        let canvasView = PKCanvasView()
        canvasView.drawingPolicy = .anyInput
        canvasView.tool = PKInkingTool(.pen, color: .black, width: 10)

        let toolPicker = PKToolPicker()
        toolPicker.addObserver(canvasView)
        toolPicker.setVisible(true, forFirstResponder: canvasView)

        let viewController = UIViewController()
        viewController.view = canvasView
        viewController.preferredContentSize = CGSize(width: 500, height: 500)
        return viewController
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}


In this example, we’re creating a DrawingView that represents a PKCanvasView. We're also creating a PKCanvasViewWrapper that presents the PKCanvasView in a modal sheet. We're using a Button to toggle the visibility of the modal sheet.


And that’s it! With just a few lines of code, we’ve added drawing and handwriting capabilities to our app.


In conclusion, the PencilKit framework is a powerful tool for adding drawing and handwriting capabilities to your SwiftUI app. By using the PKCanvasView and PKToolPicker, we can easily create a seamless drawing experience for our users. And remember, even programming can be fun with a little bit of humor. Why did the programmer quit his job? Because he didn't get SwiftUI!


Give Support or Tip👋🏿


Give a Tip with CashApp: https://cash.app/$DiAlcatic

66 views0 comments
bottom of page