充分利用 Apple Pencil 的强大功能

作为 iOS 18，iPadOS 18 和 visionOS 2 中的新功能，PencilKit 工具选择器现在支持自定属性，让用户能够选择完全自定的工具。了解如何利用同样出色的系统级工具选择体验，充分优化工具选择器带来的自定绘画体验。探索如何访问 Apple Pencil Pro 的新功能，包括侧旋角度、轻捏手势以及触觉反馈。

章节

0:00 - Introduction
1:16 - Configuring the tool picker
5:20 - Custom tools in the tool picker
8:47 - Apple Pencil Pro features and APIs

资源

相关视频

WWDC20

WWDC19

PencilKit 简介

下载

大家好我叫 Sam 是一名软件工程师从事绘图功能的开发在这个视频中我将介绍 PencilKit 工具选择器和 Apple Pencil API 的改进功能这些改进功能可以帮助你在 App 中打造富有表现力的绘图体验如果你想着手构建丰富多彩的绘图体验最简单的方法就是使用 PencilKit 而 PencilKit 工具选择器可以帮你轻松整合所有最新的平台功能它在 iPad 上效果很棒提供了响应灵敏的选择器这个选择器可以灵活调整以适应各种绘图和书写工作流程在 iPhone 上它会停靠在可用的空间中为用户提供各种工具和控件

而在 Apple Vision Pro 上它会显示在悬浮于窗口外的装饰元素中现在有了 Apple Pencil Pro 只需轻捏一下就能在手部所在的位置显示 PencilKit 工具选择器首先我将介绍工具选择器的一些新功能借助这些新功能你可以进行配置为你的 App 选择一套合适的工具然后我将展示如何直接在这个工具选择器中构建自己的自定工具最后我将重点介绍一些用于将绘图体验与 Apple Pencil Pro 整合的全新 API 首先演示一下工具选择器的新功能我在画我家的两只猫咪使用的是我正在开发的一款 App 使用这个 App 可在利用 PencilKit 绘制的笔画旁添加动物形状的图章这个视频的相关资源中提供了这个项目的源代码在我的 App 中我提供了画笔和橡皮擦等工具还提供了动物工具轻点动物工具可以调出颜色、大小的控件和一个自定形状选择器当我更改这个工具的不同属性时选择器中的项目会更新以表示我选中了哪个项目

工具选择器深度支持轻捏手势等 Apple Pencil Pro 功能而且无需编写额外代码当我轻捏时我的自定工具会和 PencilKit 工具一起显示在圆弧中我要调整图章的属性为我的每只猫咪添加完美的爪印

我的图章工具支持 Apple Pencil Pro 侧旋角度因此我在放置爪印时可以精确地进行旋转很好！现在我可以直接在工具选择器中轻点这个按钮在画上签名！

从 iOS 13 开始 PKToolPicker 提供了使用全套 PencilKit 工具轻松进行初始化的方法欢迎观看“PencilKit 简介”视频进一步了解如何将 PKToolPicker 添加到你的 App 作为 iPadOS 18 和 visionOS 2 中的一项新功能工具选择器现在让你能够定义可用的工具你可以将工具选择器与 PKCanvasView、你自己的绘图画布或这两者的组合搭配使用！

当使用书写工具来提供用于在 PKCanvasView 上绘制笔画的工具时甚至可以添加属于同一类型的多个工具！例如这些功能非常适合用于在提供注解体验的 App 中显示两种颜色的钢笔或是两种颜色的记号笔 PKToolPickerItem 有许多类型能够为你的选择器提供所需的任何项目使用全新 toolItems 构造器可以自定适合你的 App 的顺序和工具套组！书写工具、橡皮擦和套索工具项都有相应的 PKTool PencilKit 会使用这些工具在它的画布上绘制内容如果将画布视图设置为工具选择器的观察器则这些工具会自动设置为 PKCanvasView 的工具属性标尺不同于其他项目轻点标尺后它会切换为打开或关闭而不是变为选中状态这个标尺项目没有匹配的 PKTool 因为它不会在画布上绘制任何内容轻点这个项目后设为观察器的 PKCanvasView 会自动切换 isRulerActive 属性

你也可以使用工具选择器观察器来切换自定画布的标尺

“随手写”功能非常适合用于自动将 Apple Pencil 手写内容转换为文本

将“随手写”项目添加到选择器中就可以集中一处提供 “随手写”和绘图功能便于切换 Apple Pencil 模式选中“随手写”工具后它会将颜色池替换成键盘快捷键栏中的控件根据 Apple Pencil 设置中启用“随手写”的偏好设置 “随手写”工具可以自动隐藏请观看 “了解 iPad 的随手写功能”视频进一步了解如何在 App 中设置“随手写”功能自定项目让 PKToolPicker 能够支持你能想到的任何非 PencilKit 工具！例如这是我之前展示的图章工具但是你也可以将这个工具替换成你的 App 提供的任何功能！我要详细介绍一下自定项目作为 iPadOS 18 和 visionOS 2 中的新功能 PKToolPicker 允许在后缘设置配件 UIBarButtonItem 使用这个按钮可显示并非绘图工具的画布操作比如插入文本框或设置背景在这里提供的操作也应该在 App UI 的其他位置提供因为当选择器处于最小化状态时这个按钮会隐藏起来接下来我将介绍如何从你的绘图画布将工具构建到工具选择器中 PKToolPicker 一直最适合用于挑选与 PKCanvasView 搭配使用的工具现在借助自定工具你可以将工具选择器与你的绘图工具搭配使用

PKToolPicker 可以与 PKCanvasView、你自己的绘图画布或两者的组合搭配使用

自定工具非常适合用于将系统 Apple Pencil 工具与你的画布独有的操作整合比如添加动物图章也可与通过绘图功能控制的照片美化工具整合

选择自定工具项目后在任何设为观察器的 PKCanvasView 上绘图功能都处于关闭状态对于自定工具你的 App 会负责进行渲染而 PencilKit 负责选择工具

PKToolPickerCustomItem 和相应的 Configuration 让你能够自行构建适合自己工具功能的项目你可以使用 Configuration 结构体来定义工具支持的属性 PencilKit 提供了控件让你可以根据工具的行为来配置颜色和宽度属性要控制其他属性需要传递视图控制器以显示更多控制项 PencilKit 会使用你在闭包中提供的预先渲染的图像在选择器中显示你的自定工具项目

每当宽度、颜色或不透明度发生变化时 PencilKit 就会为新的图像调用这个闭包当自定属性发生变化时你还应该调用 reloadImage 方法考虑一下如何在工具图像中表示工具的属性 UILabel.drawText(in:) 非常适合用于绘制工具上的文本指示器比如用于表示不透明度值最后我将展示如何在你的 App 中充分发挥 Apple Pencil Pro 的强大功能 Apple Pencil Pro 提供了大量新功能可以帮助你进一步提升 App 的绘图体验！我在“备忘录”中制定了“Salsa Garden”计划现在我想快速更改一些内容要挑选理想的工具来为 “CILANTRO”标签添加下划线我只需轻捏 Apple Pencil Pro 即可在我悬停的位置显示工具选择器先更改钢笔工具的颜色然后绘制下划线

效果不太好我要撤销操作然后换用高亮显示效果轻捏 Apple Pencil Pro 然后长按撤销按钮调出一个滑块现在只需滑动即可撤销多项操作

再次轻捏切换到记号笔工具 Apple Pencil 让用户能够轻松利用不同的动作来绘制富有表现力的笔画这些动作包括改变高度、方位角以及应用不同的力度

现在有了 Apple Pencil Pro 侧旋功能可以进一步提升创作体验

如果你的 App 使用 PKCanvasView 那么记号笔和钢笔都会支持这项功能使用 Apple Pencil Pro 时可以通过侧旋来控制笔画的角度！使用所有 PencilKit 工具时 Apple Pencil Pro 的悬停位置下方会显示漂亮的阴影代表特定的工具我要使用记号笔工具来高亮显示“CILANTRO”标签在笔画的末尾暂停以触发形状识别触发后我可以通过手部的触觉反馈确认识别成功这种吸附功能让整个体验瞬间生动起来！ “备忘录”App 利用 PencilKit 实现了这种深度整合但除此之外还有丰富的 API 可以与你自己的自定绘图画布整合首先我将介绍新的撤销滑块作为 Apple Pencil Pro 的新功能轻捏手势可用于调出一个滑块来快速浏览撤销/重做历史记录这项功能适用于所有 App 即使不使用 PKToolPicker 也可以使用这项功能如果想要禁止这项操作可以通过委托来安装 UIPencilInteraction 实现这个方法以响应轻捏操作对于提供绘图功能的 App 轻捏手势开辟了全新的可能性让用户无需松开 Apple Pencil 即可与你的 App 进行交互

将轻捏作为执行独立操作的单一手势能让你的 App 带给用户更舒适的使用体验通过一项设备全局偏好设置你可以设置 App 应该如何响应轻捏 Apple Pencil Pro 的操作其中包括一些新增选项例如显示关联工具盘或运行系统快捷指令

请注意如果将这项偏好设置设为运行快捷指令则轻捏事件不会发送到你的 App 现在在支持的设备上向 App 发送轻点两下或轻捏事件时 UIPencilInteraction 也会发送 Apple Pencil 悬停位姿信息位姿描述了 Apple Pencil 在显示屏上方的放置方式包括在屏幕上方的位置、到屏幕的 Z 轴偏移以及方位角、仰角和侧旋角度 PencilKit 会根据这些位姿信息在接收到相应的轻捏操作时确定显示 PKToolPicker 的位置你也可以在自己的工具选择器中使用这些信息这里的代码可以完成这项操作我要实现委托方法以接收轻捏事件检查用户是否希望在轻捏时显示工具盘轻捏结束后如果悬停位置可用就会将悬停位置发送到工具盘显示除了 UIPencilInteraction 的更新之外还有全新的 SwiftUI API 用于与 Apple Pencil 交互这是 SwiftUI 中的同一个示例使用了 onPencilSqueeze 修饰符我会检查偏好设置、所处阶段如果悬停位置可用我还会获取悬停位置你可以在工具选择器中采用这些 API 以便与你在“设置”中做出的选择保持一致也可以使用 PKToolPicker 实现所有这些操作而无需编写任何额外代码 Apple Pencil Pro 使用现有的 SwiftUI 和 UIKit 反馈 API 提供触觉反馈这些 API 已经在许多地方得到应用比如用于在控件状态发生变化时提供反馈

反馈 API 经过调优能够根据平台特征和设置等因素在不同场景中提供不同类型的反馈例如可以单独提供触觉或音频反馈也可以两者都提供或都不提供

SwiftUI 和 UIKit 中都提供了新的反馈 API 用于对齐吸附和完成路径

这些 API 现在可以利用位置来获得更多背景信息以确定最适合给定事件的反馈方式这个示例说明了如何使用新的 UICanvasFeedbackGenerator 类当自定画布吸附到布局参考线时我会告诉反馈生成器发生了对齐当触发自定形状识别逻辑将绘制的笔画吸附到简洁规则的形状时我会告诉反馈生成器完成了一条路径 UIFeedbackGenerator 和它的所有子类都进行了更新从而在生成反馈时使用初始化视图和这个视图中的一个点对于视图请选择接近要生成的反馈的视图比如画布视图请务必更新 UIFeedbackGenerator 的所有用例这将有助于 UIKit 提供最适合你的 App 的反馈除了 UICanvasFeedbackGenerator SwiftUI 还在 SensoryFeedback 结构体中提供了 alignment 和 pathComplete 这里有两个 State 整数它们会在与参考线对齐时以及绘制的笔画吸附到形状时递增我已经针对这些运算将 sensoryFeedback 修饰符添加到我的画布上的特定视图中这样一来每当触发器的值发生变化时就会请求反馈采用 SwiftUI 中的 SensoryFeedback 或是 UIKit 中的 UICanvasFeedbackGenerator 就能发挥 Apple Pencil Pro 的优势让自定画布变得生动鲜活请查看 Apple 开发者文档中的 “在你的 App 中玩转触觉反馈”一文了解更多详细信息侧旋角度能让笔画变得更具表现力应该将侧旋角度用于提供绘制笔画输入而不是用于控制用户界面元素利用侧旋位置可以让自定笔画响应更灵敏

理想之选是让笔画模仿带有成角度尖端的真实工具随着手上的侧旋动作而变化

添加侧旋角和方位角可以更好地响应不同的动作此外为了在不支持侧旋的设备上提供备用方案 UITouch 和 UIHoverGestureRecognizer 上都提供了 rollAngle 这有助于提升自定工具的悬停体验就像我之前展示的动物图章预览一样接收手指触控操作时要想实现笔画的变化方向和速度是很不错的备用方案侧旋通过蓝牙发送首次发送时会进行估算随后会进行更新请务必实现 touchesEstimatedPropertiesUpdated 以获得最准确的笔画最终值也请查看最新版《人机界面指南》了解实现所有 Apple Pencil 功能的最佳实践以上就是 Apple Pencil 的新增功能！那么接下来该怎么做？采用 PKToolPicker 来提供工具选择体验进行深度系统集成并减少代码量将自定工具添加到 PKToolPicker 从而在提供 PencilKit 工具的同时一并提供自定工具还要借助可用于与 Apple Pencil Pro 整合的丰富多样的 API 来提升自定绘图体验要想开始行动并充分利用 Apple Pencil 的强大功能要做的就是这些！谢谢观看！

10:24 - Respond to squeeze in UIKit

class MyViewController: UIViewController, UIPencilInteractionDelegate {
    
    func pencilInteraction(_ interaction: UIPencilInteraction, 
               didReceiveSqueeze squeeze: UIPencilInteraction.Squeeze) {

        if UIPencilInteraction.preferredSqueezeAction == .showContextualPalette &&
           squeeze.phase == .ended {
           let anchorPoint = squeeze.hoverPose?.location ?? myDefaultLocation
           presentMyContextualPaletteAtPosition(anchorPoint)
        }
    }
}

10:46 - Respond to squeeze in SwiftUI

@Environment(\.preferredPencilSqueezeAction) var preferredAction
@State var contextualPalettePresented = false
@State var contextualPaletteAnchor = MyPaletteAnchor.default

var body: some View {
    MyView()
        .onPencilSqueeze { phase in
            if preferredAction == .showContextualPalette, case let .ended(value) = phase {
                if let anchorPoint = value.hoverPose?.anchor {
                    contextualPaletteAnchor = .point(anchorPoint)
                }
                contextualPalettePresented = true
            }
        }
}

11:50 - Provide canvas feedback in UIKit

class MyViewController: UIViewController {
    @ViewLoading var feedbackGenerator: UICanvasFeedbackGenerator
    
    override func viewDidLoad() {
        super.viewDidLoad()
        feedbackGenerator = UICanvasFeedbackGenerator(view: view)
    }

    func dragAlignedToGuide(_ sender: MyDragGesture) {
        feedbackGenerator.alignmentOccurred(at: sender.location(in: view))
    }

    func snappedToShape(_ sender: MyDrawGesture) {
        feedbackGenerator.pathCompleted(at: sender.location(in: view))
    }
}

12:29 - Provide canvas feedback in SwiftUI

@State var dragAlignedToGuide = 0
@State var snappedToShape = 0
 var body: some View {
    MyView()
        .sensoryFeedback(.alignment, trigger: dragAlignedToGuide)
        .sensoryFeedback(.pathComplete, trigger: snappedToShape)
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。