PencilKit Basics — The Drawing Environment For Your iOS App

A few weeks ago, one of my clients asked me if I could create an iPad app that would allow them to draw and save some drawings to the native Photos app. I assured them that it was possible and that all they needed to do was provide their vision, while I took care of the technical implementation. I said my favorite answer:

You need to imagine only and rest is my job!

I developed an innovative app using PencilKit and deployed it to my client’s iPad via TestFlight. They used the app to gather feedback from their guests about the event and displayed the responses on a large screen for all to see.

Photo by Kelly Sikkema on Unsplash

What is PencilKit?

PencilKit is a drawing framework for iOS that enables users to create digital artwork using either Apple Pencil or their finger as input. The resulting drawings can be displayed in iPadOS, iOS, or macOS. PencilKit comes equipped with a range of tools for drawing, erasing, and selecting lines.

Creating a Basic PencilKit Example

To create a basic PencilKit example, you will need to do the following:

1. Add the PencilKit framework to your project.
2. In your storyboard, drag a PKCanvasView object onto your view controller's view or you can create it in programmatic way.
3. In your view controller class, create an outlet for the PKCanvasView.
4. Implement the PKCanvasViewDelegate protocol in your view controller.
5. Set the delegate property of the PKCanvasView to your view controller.

Here is some sample code that demonstrates how to do this:

import UIKit
import PencilKit

class ViewController: UIViewController, PKCanvasViewDelegate {
    
    // Create the CanvasView first
    let canvas = PKCanvasView()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set the delegate property of the PKCanvasView
        canvasView.delegate = self

        // Add CanvasView in it's superview
        view.addSubview(canvas)
    }
    
    // Equate its boundaries with the boundaries of main ViewController
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        canvas.frame = view.bounds
    }

}

Photo by Shawn Rain on Unsplash

How to draw with our fingers?

This is the basic implementation of PencilKit and if you run this code you will see a white, blank canvas and you can draw on it with your Apple Pencil. But if you need to draw with your finger, you need a line of code more. CanvasView comes with a property named drawingPolicy comes with a default value called pencilOnly. You need to set it as anyInput in viewDidLoad().

canvas.drawingPolicy = .anyInput

Adding the ToolPicker to CanvasView

We need a few basic steps to have an awesome ToolPicker for our drawings.

1. Create a PKToolPicker object.
2. Set the visibility for the tool picker, based on when the specified responder object (CanvasView) becomes active with ToolPicker’s setVisible method.
3. Add the specified object (CanvasView) to the list of objects to notify when the picker configuration changes with ToolPicker’s addObserver method.
4. Asks UIKit to make this object (CanvasView) the first responder in its window.

Here is some sample code that demonstrates how to do this:

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

Now, we have a CanvasView with a working ToolPicker. For now, we can only see the drawing but we can’t save it. Next week, I will write a more detailed PencilKit content with PhotosUI to save drawings in your device.

You can find source code on my Github repository.