检查、修改和构造 PencilKit 绘图

（你好 WWDC 2020） 你好 欢迎来到 WWDC （检查、修改和构造 PencilKit 绘图） 大家好 我是 Will Thimbleby 我们来看看 PencilKit 绘图里面的内容 看看它们是由什么组成的 以及你可以用它们来做什么 PencilKit 非常容易采用 提供漂亮、逼真的墨水 最好的低延迟绘画体验 以及 iOS 14 中一些新的用户界面改进 有关这些改进的更多信息 请参见《PencilKit 中的创新》这一讲

在iOS 14中 我们还会让你看看 PencilKit 的数据模型内部 绘图、笔画、墨迹、路径和点 这将使你能够使用 PencilKit 在你的 app 中构建一些出色的新功能

通过对数据模型的访问 你将能够检查你的用户所画的内容 对所画的内容做出反应 操作现有的绘图 或从头开始动态地创建新的绘图 为了举例说明 PencilKit 的新功能 让我直接用一个演示来讲解

这个演示也可以作为示例代码 我一直在做一个 app 来帮助 我七岁的儿子练习写字 在这个 app 的顶部有一个文本字段 上面写着我想让他练习的单词 （欢迎来到 WWDC） 下面是 PencilKit 对同一文本的合成绘图 我可以用键盘改变这个文字 但这是 Pencil 的演示 我可以使用卓越的涂文字新功能 顺便说一下 它也使用 PencilKit 把这段文字改成我想让他练习的东西 也许改成更适合七岁孩子的东西

（恐龙最厉害） 当我输入文字时 下面的模板 PencilKit 绘图 是由各个字母构成的

在右上角 我还可以选择我想让他练习的 字体大小和难度

现在我有了一个模板 我们就可以练习写字了 下一个要抄的笔画是由这个红点 来动画显示如何写下一个字母 我只需要复制它

如果我写的东西很接近模板上的字 我的笔迹就会变成绿色 就可以继续 如果我写得不好 笔画就会消失 动画就会重新开始

我的分数显示在右上方

让我们看看我的成绩如何

我们做得很好 所以我们看到了一些烟火 这是对七岁孩子的重要激励工具

但我已经练了几年的字了 为什么不试试更复杂一点的东西呢？ 我画了一个 PencilKit 的连字符 我已经把它添加到 app 中

现在我们可以练习书法了

这个 app 正在从文本中 合成 PencilKit 绘图 将其动画化并对我写的内容进行识别 这只是一个小例子 说明你现在可以通过访问 PencilKit 数据模型来做什么 那么我们来看看 PencilKit 绘图里面的内容 这里我们有一幅简单的花的画 如果我们把它分开来看 我们可以看到 这幅画是由许多 PencilKit 笔画构成的 每一个笔画都代表了 用户所画的一条单独的线 这些笔画是按照用户画的顺序展开的 可以看到先画了花的轮廓 然后再画出花茎、叶子 最后用马克笔整体上色

这里我们有我画的数据资源 它包含了我刚才给出的演示的小写字母 为了能够生成文本 我们首先要把这张图 分割成一个个单独的字母

之后 将这些字母组合起来 生成用户用来练习的 模板文本

为了把这幅画分割开来 我们把小写字母画出来 得到它的笔画 我们对这个数组进行切分 得到每个字母的笔画

然后 我们可以用它 为每个字母创建新的绘图 对字母表中的每个字母都要重复这样做

如果你想检查或修改一个绘图 你可以通过访问绘图的笔画数组来完成 你也可以使用笔画从头开始创建新的绘图

那么 笔画又是怎么回事呢？ PencilKit 笔画的构成是什么？ 对于笔画来说 主要特性是路径 这提供了笔画的形状

还有墨水 它描述了笔画的外观 它的颜色和类型

是给予笔画的方向和位置的一种转换 笔画也可以有蒙版 我们在后面的讲座中会讨论到

笔画的另一个有用的属性是渲染界限 当它被渲染时 这是一个包含整个笔画的边界框 渲染界限解释了所有笔画属性的效果 包括路径、墨水、变换和蒙版

墨水 描述的是笔画的样子 包含墨水的种类和颜色

墨水没有宽度 笔画的宽度是沿笔画路径变化的

笔画路径描述了笔画的形状 以及该形状沿路径变化时的外观 例如 笔画路径在某个时间 给出了的笔画的宽度

PencilKit 笔画路径 是 PencilKit 笔画点的 统一立方体 B 样条 听起来很拗口 这是什么意思呢？

这就是说一个路径的内容 其实就是 B 样条的控制点 所以如果我们迭代路径上的点…

依次画出每一个点…

这样画出的点实际上并不在笔画上 这些点是 B 样条控制点 可能并不是你想画的 为了得到实际路径上的点 我们需要对样条进行插值

为了对样条进行插值 我们用 interpolatedPoint strideBy 来访问这些点

这提供了一个点的序列 我们可以像以前一样迭代 画出这些 我们就有了路径上的一系列点 这里有几件事需要注意 它们在路径上 它们的数量比较多 而且它们的间距是统一的 在这个例子中 距离为 50 点 这就是传递给方法的步幅参数

你可能也会注意到 最后一点的间距是不均匀的 这是因为无论步幅如何 笔画上的最后一点总是生成的 正如本例中所展示的那样 你可以通过距离、时间 或参数值来跨步 距离和时间是不言而喻的 距离是绘图坐标空间中的点 时间是持续时间 以秒计算 这取决于用户绘图的速度 参数值与 B 样条的参数插值有关

为了解释什么是参数值 我们重新回到画控制点 这和我们之前使用的代码是一样的

如果不画控制点 而是迭代路径的指数 从零开始到控制点数 在每次迭代时 我们得到使用 interpolatedPointat 得到参数值 0、1、2、3 等等的点 画出这个…

我们得到与控制点相等的点 但这些点其实在路径上

为什么这很有用呢？ 让我们为这些点标上数字 这样你就能知道是怎么回事了 参数值很有用 因为它是一个浮点值 这意味着你可以要求任何值的插值点 包括控制点之间的非整数值 如 2.4 或 4.8…

等等 这让你可以灵活地以任何你想要的方式 插值笔画路径 到目前为止 我们看到的所有插值 都是用统一步长来插值路径 利用参数值 PencilKit 还提供了 使用参数值、偏移值 沿路径任意距离步进的功能

这个函数可以让你 偏移路径上的一个参数值 在时间或距离上 向前或向后任意移动

在动画制作时 非均匀步进 是有用的地方之一 我前面做的演示使用了这种 可以沿着笔画的红色标记点 进行动画的能力

每一帧 当前笔画上的标记位置 都会被上一帧以来的准确时间长度所偏移

非均匀步进是必要的 因为我们并不能保证动画帧之间的时间 总是均匀的

要在演示中制作动画 首先我们要得到增量时间 即当前帧和前一帧之间所经过的时间

我们用它来将当前的动画参数值 沿路径偏移相同的时间 这个动画沿着笔画路径 以与用户绘制时相同的速度进行

最后 我们更新标记位置 从新的参数值中得到路径上的新位置

所以这就是路径 沿着路径的控制点和插值点 都是 PencilKit 的笔画点 这些是路径和笔画的原子构件 它们同时捕捉某一特定位置的 笔画的外观和触碰信息 这些点是以有损压缩格式存储的 所以你创建的任何点都不会以完美的精度 捕捉到要使用的值 我们来仔细看看笔画的一个点

一个 PencilKit 笔画点有几个外观属性

其中的第一个就是点的位置

一个点也是有大小的 对于标记笔画来说 不会是正方形的

一个旋转角度 或方位角

最后是不透明性 这些属性组合在一起 描述了一个笔画在某个位置的出现方式

笔画点也有几个 不是外观属性的属性 力度和高度与绘制笔画时 UITouch 的数值相同 时间偏移是指 从该点所属的笔画路径的创建日期开始 以秒为单位的偏移 这提供了用户如何绘制笔画的时间信息

我们现在回过头来谈谈 我们还没有讲到的 笔画的最后一个属性 那就是蒙版

当使用像素橡皮擦只擦除一部分笔画时 通常会产生带蒙版的笔画 大多数笔画通常不会被擦除 但当它们被擦除时 蒙版用于在渲染中剪切这些笔画 并调整用户在画布上与它们互动的方式

蒙版可以有孔

或者它们可以把一个笔画切成多块 在这个例子中 使用橡皮 笔画已经被分成了两个独立的笔画

这些成为独特的、独立的笔画 对用户和 API 来说都是如此 例如 这两个新的笔画 都有自己独立的变换和蒙版

用户可以选择其中一个笔画 并在不影响其他笔画的情况下进行移动 而不影响其他笔画

PencilKit 笔画是带有蒙板的 但笔画路径不是 这就意味着 如果我们用前面的代码 来画一个笔画路径 然后用这个代码来画一个带蒙版的笔画

我们会得到一个 比我们想要的长得多的路径

相反 我们要使用笔画的 maskedPathRanges 属性 这是剪切到蒙版时 笔画路径上 参数值范围的数组 在这里 我们迭代 maskedPathRanges

并在每个范围内插值点

这就正确地给出了笔画路径的解释 使蒙版笔画有意义

笔画可以有零蒙版遮挡范围

例如 如果用户删除了大部分笔画 而只留下一小部分 且该部分不与路径样条相交 那么所产生的蒙版笔画 将有零个 maskedPathRanges

笔画也可以有多个蒙版的遮挡范围 在这种情况下 一个有孔的笔画有四个单独范围

识别是许多卓越功能的构建模块 你可以用 PencilKit 构建这些功能 基于样条的识别 可以利用这些 maskedPathRanges 对被蒙版遮挡的笔画进行合理的解释 这就是我们在备忘录中 进行手写识别的方法

在诠释出笔画时 你可以使用 maskedPathRanges 来获得一个点的范围 按照你想要的方式对它们进行插值 并使用时间和力度等非外观属性 来补充路径的形状

你之前看到的演示 提供了一个简单的基于样条识别的例子 它使用匹配算法对用户所画的东西 和他们试图复制的模板之间的相似度 进行比较和评分 如果你想进行基于图像的识别 可以使用 PKDrawing 上的渲染 API 来生成图像 PencilKit 提供了一种超级简单的方法 来为你的 app 添加强大的 Pencil 支持 现在 你可以查看绘图内部并访问笔画 墨水、路径和点 检查用户写的东西和画的东西 以建立像使用 PencilKit 的 新的涂文字体验这样的功能 该功能使用 PencilKit 在整个 iPadOS 的文本框中实现手写 修改绘图 创造响应用户行动的 交互式的绘画体验 并程序化地创建新的绘图 就像示例代码一样 生成手写模板进行练习 （请进 我们在营业） 增加对 Pencil 的支持 它是我们最具表现力的输入设备之一 几乎是对所有应用的一大补充 PencilKit 一直是将绘画 添加到你的 app 中的一种奇妙方式 而现在 你可以看到绘图的内部 它也是你想要建立的以 Pencil 为中心的 新体验的一个非常强大的基础