PencilKit

PencilKit

Capture touch and Apple Pencil input as a drawing...

Index

1. What Is PencilKit

2. PKCanvasView

3. PKToolPicker

4. PKDrawing

5. PKTool

6. UIViewRepresentable

7. Example... :)

What Is Pencilkit

PencilKit, Apple's drawing and annotation framework.

PencilKit makes it easy to incorporate hand-drawn content into your iPadOS or macOS apps.

pencilkit was first introduced in 2019 its available on iOS13+

so pencilKit .... Apple's drawing and annotation framework it provides a drawing environment for your iOS app that receives input from Apple Pencil or the user’s finger. and you can turn it into images as we will see later in the example.The environment comes with tools for creating, erasing, and selecting lines.

A PKCanvasView object captures content drawn and displays it in the app. it handles all of the touch events and data coming whither from Apple Pencil or user's finger , and renders that information using the tool you specified when drawing. The canvasview stores the captured input in a PKDrawing object. we will check that later..

PKCanvasView

A view that captures Apple Pencil input and displays the rendered results in an iOS app.

var canvasView = PKCanvasView()

1)PKToolPicker is a floating tool palette that consists of all the brushes, color palettes, and helper tools for the drawing. it includes also undo and redo options.

canvas view conforms to the PKToolPicker protocol so we can add the canvasview as an observer to the ToolPicker. we can achive that with just few lines of code.. first we simply create our toolPicker. then: .setVisible() will Tie the tool picker’s visibility to whether the canvasview is active or not. then: we add the canvasview as an observer to the tool picker and this will automatically update the current drawing tools and ensure the canvas view is notified of any changes to the tool picker so as the user interacts with items in the palette, such as changing ink colors, or line widths, the canvas automatically updates its drawing environment accordingly. here we set the canvasview to become the first responder and this makes the tool picker visible.

PKToolPicker

• A canvas view conforms to the PKToolPickerObserver protocol, so you can add it as an observer of the window’s tool picker.

PKToolPickerObserver

PKDrawing is the data model responsible for storing all the drawings.so for example if we want to delete the drawing or clear the canvas we will simply call this function that will access the drawing of the CanvasView and asign it to a new PKDrawing object.

PKDrawing

in the second code snippet i am just creating a button to save the drawing to the photos album on the device. first we create the image with its bounds equal to the bounds of the canvasView. and then we call the function UIImageWriteToSavedPhotosAlbum and will pass the created image and that will save the image to the PhotosAlbum.

A structure representing the drawing information captured by a canvas view.

• PKCanvasView drawing input is captured in a PKDrawing object.
• we can generate an image based on the drawn content as we see in the example.

Delete Drawing

Save Drawing to Album

comming to PKTool now in case you dont want to get the entire tool palette from toolPicker in your app ..lets say maybe in your app the user just needs to sign some document so in that case you probably dont need all the tools that come with PKtoolPicker so you can limit the user options to just a pen with blue color maybe and you can accomplish that with just a single line of code using the PKInkingTool structure as you see here. and it includes several types for diferent inks like pen,pencil and marker. and if we wanna create eraser we use PKEraserTool it requires specifying type either vector or bitmap and Accordingly, the vector objects or pixels can be erased from the screen. and if you want the option to select drawing areas or your signature in our case you can create a lassotool using PKLassoTool structure.

PKTool

An interface adopted by drawing and writing tools used by a canvas view.

PKEraserTool

PKInkingTool

PKLassoTool

PKCanvasView is a UIKit view. To use it in SwiftUI, we need to wrap it in a SwiftUI view that conforms to UIViewRepresentable protocole.and that is provided for us by apple.so Basically, we just need to create a struct in SwiftUI that adopts the protocol to create and manage a UIView object. .....it might sound a bit confusing but we will see now how we can do that ..:)

UIViewRepresentable With SwiftUI

Bridge between SwiftUI and UIKit

Apple provides us with a UIViewRepresentable protocol that allows us to wrap UIKit views and use them from SwiftUI views.

so first :create a struct in SwiftUI that adopts the protocol.then: we declare inside the struct the canvasView var with @Binding proprety wrapper that lets us declare that this canvaseView var comes from elsewhere -that is our swiftUI view-, and should be shared in both places. here: we are just creating the toolpicker as explained before. The simplest implementation using UIViewRepresentable requires us to handle two methods: makeUIView and UpdateUIView. The makeUIView allows us to set up our representable view -that is PKCanvasView- . and It’ll be called only once during the SwiftUI view’s lifecycle. so now what we are doing inside the makeUI view is first : we set the drawingPolicy property that controls what kinds of input the canvas view accepts. well By default, it listens only for pencil input. This doesn’t work for devices that don’t support an Apple Pencil, such as an iPhone or the simulator. so we can set it to anyInput in the simulator environment to facilitate testing. and then as explained we are just attaching the toolpicker to the canvasView and putting it visible . Then:we return the canvaseView. so In the makeUIView method, we are returning an instance of PKCanvasView. This is how we are wrapping a UIKitview and make it available to SwiftUI. :) -------------------------------------------------------------------------------------------------- The updateUIView gets triggered whenever its enclosing SwiftUI view changes its state. Inside this method, you can do changes to the view information. but because in our case we don’t need the UIKit to react to any changes in the SwiftUI view, so can keep updateUIView(_:context:) empty. but i anyway did some changes inside the updateUIview so that i can show you how the updateUIview is allways being called.

SwiftUI View

Now the last thing we will do to complete our implementation is the connection between the swiftUI and the UIKit view. so here we create our CanvasView with @state property wrapper. and then we are calling the CanvasView Struct and passing the just created canvaseView. so the @state and @binding property wrappers let’s us define an explicit dependency. So whenever in the swiftUi view the canvasview gets changed the @State gets toggled, and, accordingly, the binding value changes, thereby triggering the updateUIView.i hope i am clear and not confusing everyone. :)

PKStrok

https://www.wwdcnotes.com/notes/wwdc20/10148/

Example...

Thanks!

In iOS 14, apple added some really features to PencilKit. like the option to select text to copy it or modify its color. and added an option to insert space between handwritten content.