PencilKit in SwiftUI

Generated with AI

Today, numerous mobile and embedded applications utilize digital pencils for capturing signatures or similar tasks (such as in courier apps, bank offices, etc.). In this post, we’ll explore how to use PencilKit in SwiftUI.

Let’s start by defining our goal:

The ContentView define the settings of the applications:

import SwiftUI
import PencilKit

struct ContentView: View {
    @State var canvas = PKCanvasView()
    @State var drawing = true
    @State var color: Color = .black
    @State var type: PKInkingTool.InkType = .pen
    
    var body: some View {
        NavigationStack {
            CanvasView(canvas: $canvas, drawing: $drawing, type: $type)
            .navigationTitle("Pencil Demo")
            .font(.system(size: 35))
            .navigationBarTitleDisplayMode(.inline)
            .foregroundStyle(Color.purple)
            .toolbar {
                Button(action: {
                    drawing.toggle()
                }) {
                    Image(systemName: "pencil")
                    .font(.headline)
                    .foregroundStyle(drawing ? Color.blue: Color.gray)
                }
                Button(action: {
                    drawing.toggle()…