This sample project, Speed Sketch, shows how to render a series of strokes a user makes by moving their finger or Apple Pencil across the screen. The project also demonstrates how to:
Distinguish between finger and Apple Pencil touches.
Improve drawing performance.
Enhance the app for Apple Pencil.
Distinguish Between Finger and Apple Pencil Touches
With Speed Sketch, users can draw by moving their finger or Apple Pencil across the screen, and the system reports the touches to the app. Speed Sketch captures these touches using the custom gesture recognizer, StrokeGestureRecognizer.
The stroke gesture recognizer receives each touch event, and appends data from the touches to an array of data samples.
The touchesBegan(_:with:) method sets a timer to give other gesture recognizers, such as pan and pinch, time to handle touches that the user makes with their finger. This behavior is unique to drawing apps such as Speed Sketch that start capturing and drawing a stroke the moment the user touches the screen.
In order to track finger and Apple Pencil touches separately, Speed Sketch uses two instances of StrokeGestureRecognizer: one for finger touches and the other to track touches coming from Apple Pencil.
To simplify the code, the app uses a helper method to create the gesture recognizers.
Each time the user draws a stroke on the screen, the stroke gesture recognizer calls the strokeUpdate(_:) method. This method checks to see if the recognizer is for Apple Pencil, and if so, puts the app into pencil mode. While the app is in pencil mode, the user can use one finger to pan the drawing canvas. When the app isn’t in pencil mode—that is, when the user is drawing with their finger—the user uses two fingers to pan the drawing canvas.
Improve Drawing Performance
The stroke gesture recognizer receives touch events from the system. For most apps, the time span between each touch event is enough to handle the gesture. However, users of drawing apps expect greater precision, which requires the app to gather all the touches reported since the last delivered touch event.
To gather the additional touches, Speed Sketch calls the coalescedTouches(for:) method. This method returns an array of UITouch objects representing the touches received by the system but not delivered in the last event. The additional touches allow Speed Sketch to provide a smoother rendering of the stroke by storing the coalesced touches as part of the stroke’s data sample.
In addition to coalesced touches, Speed Sketch uses touch data predicted by the system as a way to enhance the perceived accuracy of the app’s drawing capabilities. Speed Sketch retrieves the predicted touches by calling the predictedTouches(for:) method for the event, then saves the touches as part of the data sample for the stroke.
The app replaces the predicted touches with actual touches as they become available.
Enhance for Apple Pencil
Apple Pencil can sense tilt (altitude), force (pressure), and orientation (azimuth), which drawing apps can use to affect the appearance of strokes. For instance, Speed Sketch uses azimuth to enhance the strokes when using the app’s Calligraphy drawing tool.
Speed Sketch also displays the altitude and azimuth data as part of the stroke when the user selects the Debug drawing tool.
Starting with the second generation Apple Pencil, users can double-tap their finger on Apple Pencil to request an action from the app (see Pencil Interactions for more information). When possible, apps should honor the system settings for double-tap actions on Apple Pencil, which include:
Switching to the eraser or the last used tool
Displaying a color pallet
Ignoring double tap
Speed Sketch doesn’t have an eraser tool or color pallet, but it does have different drawing tools: Calligraphy, Ink, and Debug. When the user’s preferred double-tap action is UIPencilPreferredAction.switchPrevious and the user double-taps their finger on Apple Pencil, Speed Sketch switches to the tool last used by the user. The sample app ignores the other preferred actions.
In order for Speed Sketch to receive the double-tap event, it adds a UIPencilInteraction object to the canvas view.