- iOS 11.0+
- Xcode 10.1+
Touch Canvas illustrates responsive handling of Apple Pencil and touch input, focusing on the force, altitude, and azimuth properties of
UITouch. The sample creates a visualization of force using line thickness, and creates a visualization of altitude and azimuth with an interactive diagram. To build on the concepts demonstrated in this sample and learn about using Apple Pencil and touch input in a drawing app, see Leveraging Touch Input for Drawing Apps.
Calculate the Force of a Touch
You can use the force of a touch applied by a finger on 3D Touch-enabled devices or from the tip of Apple Pencil to create effects in your app. For example, the force of a touch can change the width of a line on a canvas.
The force value input affects the result of handling a
UITouch. In this sample, force is interpreted as a value representing the magnitude of a point in a line, including a lower bound on the force value usable by the app.
This sample uses the magnitude value to affect drawing on the canvas, including the line width value.
Create a Visualization of Apple Pencil’s Altitude and Azimuth
Touch Canvas contains a visualization of the altitude and azimuth for Apple Pencil as you draw on the screen when the Debug mode is enabled. This visualization is a diagram which continuously updates based on Apple Pencil’s motion.
Apple Pencil reports its altitude as an angle relative to the device surface through the
altitude property on
In this sample project, the line length extends to the edge of the diagram when Apple Pencil is fully horizontal. If Apple Pencil is perfectly vertical, the line length reduces to a dot under Apple Pencil’s tip. The line length calculation transforms the altitude angle relative to the radius of the diagram.
Apple Pencil reports its direction, or azimuth, relative to the view Apple Pencil interacts with. A drawing app might use azimuth information to change the shape or strength of a particular drawing tool. Access the azimuth information with the
azimuth methods of
The interactive diagram demonstrates how altitude, azimuth angle, and azimuth unit vector values can be used together. Here, the azimuth angle rotates around the diagram opposite the actual azimuth value, and the dot at the end of the altitude line moves by combining the altitude and azimuth unit vector properties. A transform efficiently applies the calculated rotation of the line and position of the dot to the diagram so that it remains responsive to small changes in Apple Pencil’s position.
Toggle Debug Drawing
Touch Canvas contains a debug drawing mode that allows you to view the operation of the properties in detail for different types of input, such as the difference between strokes drawn at different speeds with Apple Pencil. The debug mode enables the interactive diagram for altitude and azimuth, and changes the color of individual line segments to identify if the
UIEvent for the line segment included data from
The sample uses the double-tap feature of the second generation Apple Pencil to toggle Debug mode when the user configures the preferred double tap action to switch tools. The sample app ignores the other preferred actions. See Pencil Interactions for more information.