PencilKit 简介

介绍PencilKit

下午好 欢迎来到 PencilKit的介绍演讲 我是Will Thimbleby

我想来聊一聊这个美妙的小物件 这是Apple Pencil 它能完全转变你在iPad上的 用户体验

事实上 它是iPad上最独特的一部分

从学龄前儿童 到Isaac Newton 从你的待办清单到美术 Pencil是一切的开始

它可在美妙的 iPad Pro上使用

以及iPad产品线下的所有设备 从最小的Mini到最大的Pro

它很适合用来修正图片 标注 涂鸦 事实上 它适用于做任何精确的操作

在iOS 13 我们对延时做了很大的优化 我们加入了一个漂亮的新工具调色板

我们向你介绍 PencilKit来让你 为你的app 添加Pencil更容易

我们也会介绍随处标记 来让用户能为你的app内容 做注释和标记 甚至如果你的app 并不需要Pencil来操作 我们来了解一下Pencil 很棒的用户体验 PencilKit如何协助你 创造良好的Pencil体验 最后 随处标记中会介绍 你应该如何为用户提供内容 来让他们做标记

一个好的Pencil体验 是怎样的？

一个好的Pencil体验 会全面利用 Apple Pencil 提供的功能

那意味着全面利用 Apple Pencil 提供的精度 它让你触碰到一个像素 它每秒能为你提供240次信息

它是独特地表达 为你提供了力度 坐标和高度 让你为你的app创建真正 富有表现力的标注 让你的app更有活力

最后 第二代Apple Pencil 有Pencil轻触功能 用户可以在你的app中 不用放下Pencil就能切换模式

现在有三种不同类型的Pencil 第一代Apple Pencil 第二代 和Logitech Crayon

它们有略微不同的功能 它们都具备很棒的精准度

它们都有相同水平的坐标和高度定位 允许你创建富有表现力的标记

第一代Pencil具有压力感应 第二代Pencil加入了手势识别

我会深入的介绍一些 Apple Pencil 所支持的更复杂的细节

如果你刚开始 你想要创建一个自定义的绘画体验 我会非常建议你查看 WWDC 2016 使用iOS的触控输入

了解一支Pencil如何工作

的关键是清楚它是什么

因此 我会给你介绍一下 Pencil背后的功能

Pencil在屏幕上创建了 一个独一无二的精准坐标 它是240赫兹

你知道的 它的水平坐标 就是它和iPad的垂直角度坐标

它的高度坐标或倾斜度 是你握着Pencil时的梯度 你可能不知道它是如何做到的 Pencil在iPad的表面 产生了第二个隐藏的触点 使用三角学来计算水平和垂直坐标

最后 Pencil 有一个轴向力传感器 来探测压力和通过 Bluetooth来传送数据

这样会导致几个后果

首先 如果一只手指或屏幕边缘 的第二个触点被检测到时 水平和垂直的值将会被估量

Pencil和iPad似成直角时 水平测量是不精准的

最后 通过一个不同的机制 检测到的压力值 会在触碰位置信息产生延时

处理Pencil的这些复杂的方面 是创建一个良好的Pencil 用户体验的关键

当我从屏幕的边缘描画时

我会获取到估量的水平和垂直的坐标

当我继续向屏幕中央画画时 第二个触点在屏幕的表面产生了

你获取了正确的值 现在 你应该返回重新修正这些值 修正之前估计的值 而不是让它像这样留在这

第二 当你画画时

Pencil后面的一个被 用来估量压力值的区域

你应该不断监听压力的更新 这样你就能绘制正确的值

当Pencil在iPad表面 离开时也能保持正确

笔画的一个区域 还在等待最后的压力值 甚至在触碰结束后 你还是需要一直保持监听它们

现在 其中的一个方面

意味着在最后笔画获取到最后值之前 用户就能开始画下一条线

我推荐一次只使用一个串行队列 来描绘一条线 时间很短 用户不会察觉到 但你想要正确地处理数据

另一个让Pencil 良好工作的部分是延时

使用实体的笔时 笔会和描绘的部分产生实际的接触

在一个电子设备上时 操作时通常 和屏幕上的线会有一个间隙

保持间隙尽可能的小 来模拟在纸上画画 的感觉是一个重要的点

在Apple 我们大家都很关注延时 我们有机器人在不断的测试

这是我们的一个测试 每秒800帧率的高速截图 你能看到笔和线之间的距离 非常的小

我来实时向你展示

看到了吗？ 再来一次

那么 一些减少延时的几个小窍门

首先 你需要在Metal中渲染

你的每帧只有几毫秒 以及 你需要逐帧不断地重复 来减少延时

在iOS 13 我们很大幅度 的改进了预测功能 你应该使用预测触碰来 进一步减少你的延迟

最后 如果你在创建 一个绘图的app 为了实现最低的延时 你应该避免使用 透明的Metal图层 也要避免使用比如模糊效果的 UI特效视图 覆盖在你的Metal图层上

以及常常被忽视的一点是 默认的导航栏 事实上 主界面可视性会为渲染 增加额外的成本

Pencil轻触手势 是支持Pencil的最后一个部分 这是让用户不用放下Pencil 就能切换模式最好的方式

为了实现 你需要使用 UIPencilInteraction

将你自己设置委托 当用户轻触时 你会获得回调

当你这么做时 你应该尊重 用户偏爱的触碰行为方式 这是用户能在设置中选择的 如果可以 你应该要遵循它

如果你的app无法遵循

Pencil轻触应该被用来切换 无害模式

那么 到目前为止 创建一个好的Pencil体验 需要做很多工作 我们提供了一些很棒的API和硬件

你在世界上创建了 一些很棒的绘制体验 我高亮了一些更好的支持 Apple Pencil 的更复杂的部分 如果你还没有认为这些是改进部分 但对你们中刚刚开始的人

我们想要为你分担一部分工作

所以 我很高兴来为大家 介绍PencilKit

PencilKit是我们在 整个操作系统使用的一个框架 我们在Notes使用它来提供 低延时的绘画和记笔记 我们在Pages使用它来 标记文档 我们在随处标记中使用它来 为截屏做注释 以及你app内容的PDF 我们有几次为一些开发者 Pinterest和Canvas 在他们的app增加了功能

在你的app中添加它只需三行代码

这里 我们创建了一个画布 在你的视图层级中添加它 选择一个墨水

就这样 你就获得了整个操作系统 相同的业内领先的低延时 我们用几个小时完善的 完全相同的富有表现力的墨水字

以及一样美妙的UI和调色板工具

只需更多的几行代码 你就能创建更全面的功能 比如 我们的示例app

我现在来向你展示

这是我们的示例app 它是一个小小的画图app 它里面有一些我之前画的缩略图 为了给你一个PencilKit 能实现的宽广度

我想你展示其中的一些 这是我之前做的一些笔记 我们来滚动浏览这些美丽的笔记

这里有一张我朋友Andy画的 美丽的花

让我有机会介绍PencilKit 是如何适配深色模式的 如果我拉下控制中心

我能切换至深色

这朵花在深色模式中和在 浅色模式中一样好看

当我返回 这些缩略图都被重新渲染了 你能看到笔记非常清晰

但我很幸运 我做到了每个工程师都想要实现的 梦想 就是在舞台上画画

那么 我切回至浅色模式

我来继续完成我之前画的一个图标

在底部 你能看到我们新设计 的调色板工具界面 用一只手指 我就能在屏幕中拖动它至 我想的位置

现在 我将它留在屏幕底部 为了完成它 我来使用尺子和记号笔 来添加一些颜色

这样 我能轻点这个尺子来使用它 使用两只手指来为尺子确定位置

我能使用尺子来画一条直线 我也可以使用它来遮盖

我来这么做

我再来添加一些颜色

轻点尺子来让它消失 我在底部添加一些颜色

现在 PencilKit能做的 最酷的事情之一是 它开始将位图和矢量 物件和像素整合在一起

你能再这里看到橡皮擦 我将在Apple Pencil 使用 双击手势来改变橡皮擦

就像这样 我切换了模式 这是一个像素橡皮擦 它让我围绕它画画 裁剪了这个图标的其他部分

现在 如果我点击橡皮擦 我切换至物件橡皮擦 使用物件橡皮擦 我能这样围绕它画画 我也能删除我裁剪的位

像这样 我使用了矢量和位图操作

来画图 我再向你展示一遍 我轻点 我得到了像素橡皮擦

我将它切断 这一次 我会使用套索工具 它在橡皮擦旁边

我能将它移动到我想的地方 或着我能点击它然后删除它

现在 我完成了我的创作 我想应该为它签名 幸运的是 我们示例app 有签名的功能 在右上方 我点击签名 你会注意到 当我这么做的时候 调色板工具消失了 我们这里有一个自定义的选择器 它让我选择一个黑色或蓝色的墨水

现在 我选择黑色

来加上我的签名

现在完成了 我点击为我的画加上签名

看吧 这是一个放置它的好地方 我认为我可以为它装框了

非常酷

好的

我们来讲一下 PencilKit的架构

你会用到的最主要的物件是 PKCanvasView 它为你的app提供了 可绘制的区域

PKDrawing是数据模型 它捕获了所有的这些美丽的线条

PKToolPicker提供了 浮动在屏幕上UI

PKTools是提供这些墨水 和你画布上的交互的工具集

PKCanvasView是一个 UI滚动视图 允许你平移和缩放 它让你选择用户 通过设置工具 用户交互行为 会向它做出什么 它允许你通过它获取数据模型

使用绘图属性来为它设置数据模型

PKDrawing是 PencilKit的一个数据模型 它是macOS上的 PencilKit的一部分

它有一个数据形式 它允许你 在数据中加载和存储绘图

你能使用这些绘图数据来制作图片 用于分享或缩略图

我们来看看示例app是如何制作 缩略图的

因为这些值都有类型 我们在一个后台的队列中安全的 完成工作

因为我们想要在app的浅色 和深色模式中 都能制作这些缩略图 我们可以使用UITraitCollections的 performAsCurrent

我们使用图画来制作这张图片

接下来 最后 我们在主线程中设置 这张图片

现在我想邀请Jenny 她将会为大家介绍关于工具 和工具选择器使用 以及PencilKit能实现的 功能的更多内容

谢谢Will 大家好 我是Jenny 我将要… 我们来通过 PencilKit提供的 一些很棒的工具来继续介绍 PencilKit

这些工具在全新的 工具选择器中 它是动态的 它悬浮在所有物件的上方 我能将它从一边拖到另一边 或甚至让它在底部成为 一个程序坞 不让它干扰我的视线

Will之前提到过 这些工具是PKTool类型 为了创建这些工具 它们是 PKInkingTool类型 你可以从这三种类型中制定一个 笔 记号笔或铅笔

这些工具都是超级动态 以及富有生动的表现 你甚至可以通过一条单独的线 基于不同Pencil属性 如压力 水平位置 高度位置 或速度来让宽度 和不透明度产生了变化

你可以在canvasView 设置这个工具来在画布中设置墨水 如果你设置canvasView为 选择器工具的一个观察者 底层会在canvasView上 设置墨水 不过 如果你有签名面板 而不想要选择器工具 你可以自己在你的app设置 至于PKInkingTool 你会指定其中之一的类型 笔 记号笔 铅笔 颜色或宽度

对于宽度的值 每个墨水类型都有一个默认的宽度 不过 就像我们之前看到的 这个宽度不是一个固定的值 它基于不同的笔的属性会改变 因此 还不如让这个宽度基于一个 平均用户笔的特征来表示一个基准值

你也可以查询每个墨水类型 的有效宽度范围

你可以看到我在这里使用了笔的工具 当我越垂直地握着这支笔 笔触的线条越细 但当我越水平地握着这支笔 笔触的线条实际上越粗了 当我在选择器工具中改变粗细 粗细的程度相应的变化了

我们也有一个PKEraser工具 你可以用它来指定一个矢量或位图

矢量会与物件对应 位图与像素对应 我们已经很努力地 统一矢量和位图的两个世界 矢量是物件 位图是像素 我们也切断这些线条 这样你就能分开它们 或之后再移除这些物件 而不只是消除屏幕上的像素

我们也有负责 选择的PKLasso工具

使用套索工具 你就能选择你需要 的所有线条 接下来 你能四处拖动它们 裁剪 复制 粘贴它 或甚至拖拽它们到不同的app中

iOS 13的新功能 我们也引入了尺子工具

值得注意的是尺子不是一个工具 PKTool 而是一个你在画布中切换的属性 展示或隐藏尺子

你能拖动它来以它为基准 画一条直线 或以它为蒙版 就像Will之前做的苹果那样 这里是水和草

现在 我们浏览了解了一些 很赞的工具 我们看看PKToolPicker 以及我们如何在屏幕获取它

一个需要注意的重要事情是 选择器工具并不是一个视图 取而代之 它是一个展示或 隐藏视图的物件 它从画布视图分离出来 它漂浮在任何物件之上 也是需要注意的一点 它和键盘非常类似 它的可见性基于第一个响应器 所以 我们来通过一些代码了解 我们怎么做

首先 我们为窗口请求共享 的选择器工具

我们添加一个画布视图 作为一个观察者 这样 无论你怎样在选择器工具 中改变工具 你也会在画布视图中改变工具

选择器工具也有一个响应器列表 如果你的物件成为了第一个响应器 以及它在列表中的可见性为真 调色板就会出现 如果setVisible为假 它会从列表中移除它 接着调色盘就会被隐藏

接下来 当画布视图成 为了第一个响应器 我们想要调色盘出现 我们将setVisible设为真

最后 我们调用canvasView的 becomeFirstResponder 这样调色盘就会出现

你可以在我们的示例app中看到 只要我们将画布视图设为 becomeFirstResponder 调色盘就为可见

然而 在我们的示例app中 我们也有一个签名面板 我们只想为你提供蓝色或黑色的墨水 我们不想让调色板出现 为了处理这件事 我们实际上要将画布 这个签名的画布视图设为 becomeFirstResponder 接下来 它会让选择器工具消失

当你让签名视图控制器消失时 在底层 你会自动地不再是 第一响应器 接下来 调色板工具就会再次出现

另一件你要留意的事情是 这个由基于响应器的可见性 是你的app可能已经存在的物件 它是第一响应器 看吧 比如 这个编辑菜单控制器 甚至当你的编辑菜单出现时 你大概会想要保持调色盘不消失 为了做到 你会简单地为 你的物件设置可见性为真 这样调色盘就会保持可见

另一件你想要考虑的是选择器工具 是常规或小尺寸的类 你会发现在常规尺寸类型中 它浮动在所有物件之上 你可以四处移动它 然而 在小尺寸的类型中 它是固定的和底部的程序坞 所以 在你的app中代表着什么呢

假使你有一个全尺寸的app 无边框 边到边设计的图片 它在常规尺寸类型中遮挡了 一些图片 但你可以移动选择器工具 到其他地方 这样就可以了

然而 在小尺寸类型中 实际上遮挡了这张图片 最精彩的部分 你会需要在小尺寸类型中 确保调整你的视图框架或滚动视图 的嵌入物 来解决选择器工具的遮挡问题

你可以通过监听选择器工具的 边框大小的改变来解决这个问题 使用观测器方法 toolPickerFramesObscured DidChange 无论你从移动它从浮动到进坞 你都会获取它 这样 你就能在你的视图 调整你的内容 通过观测边框尺寸

另一件需要为 选择器工具考虑的事情是 你的重做和撤销按钮

你在常规类型的类中会注意到 重做或撤销按钮处于调色盘的内部t 提供给你 然而 在这个小型类中 它们不在调色盘里 那么 你需要保证为这些小型类 展示你自己重做和撤销按钮

现在 我们了解了 你如何在屏幕上获取了一个基本的 画布视图和选择器工具 我们来了解更多的一些 PencilKit的高级行为 从一些画布视图的代理开始

你可能想要基于用户是否在画图 来更新你的app 你可以通过监听笔或触碰事件 这样你就能获取 canvasViewDidBeginUsingTool的回调

当笔或手离开屏幕或 你会得到一个 canvasViewDidEndUsingTool的回调 然而 在这个时机 你的画画还没有完全地被更新 因为就像Will提到过它不会更新 在最后的压力值传入之前 你会获得最后的 canvasViewDrawingDidChange 只有在这个时机 你才会 真正的完成绘制 此刻 你能在画布中查询到绘制 更新你的模型物件 制作缩略图 或进行必要的保持

你也想要加载在你的画布视图中 加载一个绘制 你可以通过调用 set drawing来实现 在这个时机 你会开始 在砖块中加载

不过 在这些砖块加载完成之后 你才会获取到一个 canvasViewDidFinishRendering的回调 你也会在滚动或缩放之后获得回调

说到滚动 你不 仅仅只能使用Pencil画画 你也可以用你的手指画画 因为PKCanvasView 是一个滚动视图 那意味着一只手指也能画图

两只手指滚动操作

它通过allowsFingerDrawing 属性 在画布视图触发 当它被设为真 一只手指和笔画画 两只手指进行滚动操作 现在 这是在画布视图的默认行为 如果这不是你想要的 你可以将这个属性设为假 不管哪种方式 只有笔会画画 和一只手指滚动 但你应该记住iPhone的上下文 环境中是不支持Pencil使用的

如果你的app中有一些更复杂的 交互行为 我们也为你暴露了 drawingGestureRecognizer接口 你能通过使用它来设置手势识别 的其他情况 或失败的请求 WWDC 2017中 有一个很棒的演讲 iOS上现代用户交互

就像Will提到的 我们也在所有的创作部分 比如截屏和标注中 使用PencilKit 在这些上下文中 你能在所有内容上绘画 你能通过设置不透明度为false 和设置背景颜色为透明 轻易地在你的app中实现

在iOS 13 我们也引入了深色模式 它是用一种完全不同的途径 查看你内容很美妙的方式 你的PencilKit的画布 看上去也很酷 它的颜色会动态调整保持清晰 你可以看到我最初用黑色的墨水 在一个白色的背景上写的笔记 但在深色模式中 它在一个黑色 背景中改变为了白色墨水 我的笔记不仅依然保持清晰 它们看上去也很酷 默认情况下 你的画布在深色模式下 也会动态调整它们的颜色

不过 如果这不是你想要的

你可以设置overrideUserInterfaceStyle 一直是浅色 你会特别地想要这么做 如果你标记的内容不改变 比如你在一张图片或一个PDF 文件中标记

现在 我们了解了 PencilKit 你也看到了如何在你的app 中创建酷炫的体验 我们来看一下随处标记 这是一个新的功能 它让你的app 传递被标记的内容 它通过截屏的一个新的API 为你提供了完整的内容 无论你为你的app截了一张图

你能在Safari中发现这个功能 现在 我打开apple.com 我使用Pencil的手势 来截一下屏幕 从角落拖过来 接着 我又了我喜欢的这个截屏 但是我不能看见页面的其他部分 所以 我点击上面的全页面部分 现在我有了可滚动的完整的网页 可以做标记和分享

好的

你也能看到我们的示例app中 也实现了这个功能 再一次 使用新的截屏手势 我会点击全页面部分 现在我有了可以发送的完整笔记

你也能在Maps中发现它有趣 的使用场景 使用新的截屏手势 我来截一张图 但你看到我的截图被铬合金 挡住了 当我点击上面的全页面部分 我能看到我的地图没有 任何的铬合金 我能看到道路和下面的餐厅

你只用在你的app中加入几行代码 就能实现这个功能 你开始会为自己在UIWindowScene 设置UIScreenshotService 代理 UIWindowScene是今年UIKit 的一个新的API 你可以在 介绍iPad的多窗口演讲中 了解更多信息

在你会为自己设置代理后 你会传递全部的内容 它是PDF格式的数据 你可能已经为一些行为比如分享 或打印 生成过这些信息 但若你没有 WWDC 2017 有一个很棒的演讲 iOS上的PDFKit的介绍 那么 当你拿到了PDF数据 你会实现代理方法 screenshotService generatePDFRepresentation WithCompletion 你会传递PDF数据和 其他两个元数据到完成处理程序 它会帮组我们保证当你从屏幕 到全页面时 我们有一个平滑的过渡

元数据的第一个数据是 indexOfCurrentPage 它在一些使用场景 比如Keynote讲演 比如我在第七张幻灯片截了一张图 当我切回全页面部分时 它会自动跳转到第七页

元数据的第二个数据是 rectInCurrentPage 它在一些使用场景 比如Safari中 这里 我有这个长的滚动页面 我将要滚动到底部 因为我对新的iPad Pro非常 感兴趣 我在底部这里截一张图

现在 当我点击上面的全面屏部分 它实际上带我进入了截屏时 一样大小的相同的页面 而没有奇怪地跳转到了上方

值得注意的是这个RECT 是我们在PDF中期待的坐标 那么 这意味着什么 视图坐标的原始点实际上 是左上角的点 然而 在PDF坐标系中 它实际上在左下角 所以 你会需要保证 合理的坐标转换 将RECT以合理的坐标空间 发送给我们

那么 我们向你展示了这些 Pencil的API 你可以创建你自己强大的自定义 的绘图引擎 但它可能需要一些体力活 在快速异步渲染的同时 你会需要监听估量的接触点 压力延时 但使用新的PencilKit 的API 我们为你提供了极其简单的方法 来将绘图功能集成至你的app中 你会在所有的iOS上获得 同样高表现力 低延时的体验

最后 你也可以使用UIKit的 其他很棒的Pencil API 比如UIPencil交互来处理 Apple Pencil上双击事件 或新的UIScreenshotService API 这样你就可以发送完整的内容 来随处标记

了解更多内容 你可以查看本次演讲的链接

现在 开始创建一些酷炫的 Pencil app吧 我们祝你有个愉快的 WWDC 2019