Introducing the Pencil Kit
Lately there are quite a lot of Drawing apps that use Apple’s new framwork: PencilKit. In this article I will share some interesting details about this new framework PencilKit was introduced by Apple at WWDC 2019. Although listening to its name implies quite special, PencilKit works quite well on IPads. Use Apple Pencil and iPhone – use your finger. Pencil Kit is only available on iOS 13 and above
Why is it PencilKit?
Specifically, PencilKit will provide a canvas view, a tool picker (with some useful drawing tools) as a PKDrawing object, for example, it will help you save / recreate the drawings. Of course, all of these functions must be implemented by you. When working with PencilKit, there are many points you need to pay attention to make a complete application. However, PencilKit is great, it works with high accuracy, low latency when used with Apple Pencil. With PencilKit, instead of trying to reinvent the wheel, you can focus on the app’s unique features
PKCanvasView
PKCanvasView represents the drawing canvas. It can scroll in default mode. However, in my opinion this is not necessary because many cavas are displayed simultaneously (1 for the original image to draw and 1 for the drawing area).
1 2 3 4 | optional func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) optional func canvasViewDidFinishRendering(_ canvasView: PKCanvasView) optional func canvasViewDidBeginUsingTool(_ canvasView: PKCanvasView) optional func canvasViewDidEndUsingTool(_ canvasView: PKCanvasView) |
The canvasViewDrawingDidChange function is called when there is any change in the canvas frame. It is very useful if you want to mark when the drawing is changed and save it if desired. Sometimes, n is also the event that triggers the image comparison code
The canvasViewDidFinishRendering function is called when the canvas view is generated. If you have a more complex drawing, it may take a while, but the drawing is displayed partially so the user experience is still pretty OK. The other two delegates are called when the user starts and finishes using it. Use the drawing tools
Integrating PKCanvasView into the app is quite easy, you can do this via storyboard or in your code.
1 2 3 4 | let canvas = PKCanvasView(frame: bounds) view.addSubview(canvas) canvas.tool = PKInkingTool(.pen, color: .black, width: 30) |
And if integrated through the storyboard, remember to add 1 normal UIView and rename the class to PKCanvasView
PKDrawing
The PKDrawing object represents the actual drawing in the canvas . You can get a drawing frame in a canvas, easily encode / decode it to store on the server (such as Firebase). Because the original drawing was drawn on the iPad but displayed on different devices, we need to scale and show the drawing with different canvas frames. CGAffineTransform proved helpful when responsible for this. In addition, you can program to attach different drawings easily
1 2 3 4 | let factor = min(scaleX, scaleY) let transform = CGAffineTransform(scaleX: factor, y: factor) let drawing = pkDrawing.transformed(using: transform) |
Another useful feature of PKDrawing is the retrieving of the current UIImage from the drawing
1 2 3 4 5 6 7 | private func image(from canvas: PKCanvasView) -> UIImage { let drawing = canvas.drawing let visibleRect = canvas.bounds let image = drawing.image(from: visibleRect, scale: UIScreen.main.scale) return image } |
PKToolPicker
PKToolPicker is a UI component that contains tools for drawing. On Ipads, it will float above other views while on iPhone it is the view located at the bottom of the screen. On iPads, it contains undo / redo functions, while on iPhone, you need to add these functions yourself. To connect PKToolPicker to canvas canvas, you need to use the following code:
1 2 3 4 5 6 7 | if let window = parent?.view.window, let toolPicker = PKToolPicker.shared(for: window) { toolPicker.setVisible(true, forFirstResponder: canvasView) toolPicker.addObserver(canvasView) toolPicker.addObserver(self) canvasView.becomeFirstResponder() } |
PKToolPicker provides several useful tools for drawing as follows:
- PKInkingTool – contains drawing tools: pens, markers, pencils
- PKEraserTool – brush, help erase part or all of your drawing.
- PKLassoTool – select an area on the drawing and move this area
- Ruler – straight ruler
- Color picker – Helps you to choose the color for the tools to choose the ink color
- Undo / Redo function (iPad only)
Some limitations
While there are many useful features, you sometimes feel uncomfortable when customizing a few objects. Here are some problems you may encounter
- It is difficult to customize the tool pickers
- You can’t get the list of strokes the drawing has
- You can only retrieve data that represents a drawing
Conclude
PencilKit is a great new framework, offering lots of drawing functions.
It will save you a lot of time and energy so you can focus on specific parts of your app and easily integrate it into your app.
Reference source: https://medium.com/flawless-app-stories/getting-started-with-pencilkit-on-ios-13-a4bda3323fd8