UWP 手绘视频创作工具技术分享系列 - Ink & Surface Dial

本篇作为技术分享系列的第四篇，详细讲一下手绘视频中 Surface Pen 和 Surface Dial 的使用场景。

先放一张微软官方商城的图，Surface 的使用中结合了 Surface Pen 和 Surface Dial。

Surface Pen 的使用场景不难想象，就像 iPad 和 Android Pad 配置的笔一样，Surface Pen 也在书写、书画和日常操作中发挥着很重要的作用。微软的 Surface Pro 和 Surface Book 系列中都重点强调了 Surface Pen 的多种用途和便捷性。而在手绘视频中，用户主动创作、体现个性化最重要的部分，就是用户用鼠标、手指触控或 Surface Pen 操作的文字和绘画了，相比鼠标和手指，Surface Pen 无疑是最适合创作的了。

Surface Dial 相对来说会稍微陌生一些，日常工作中很少见到，因为 Surface Pro 和 Surface Book 销售时并不包括它，需要单独购买，所以使用没有那么普及。但是对于艺术创作者，Surface Dial 还是相当好用的，它可以完成很多辅助快捷功能，发挥非主力手的作用，解放你的主力手，如图中所示：右手是主力创作手，专门负责绘画等复杂操作；左手是非主力手，负责一些功能性的辅助操作，比如切换笔的颜色、粗细、放大缩小画布等，另外 Dial 会默认附加一些系统级别的快捷功能，如音量调节，界面滚动等。另外 Dial 的操作分为两种模式：off screen 和 on screen，顾名思义就是屏幕外和屏幕上的功能，目前支持 on screen 功能的只有 Surface Studio，其他设备只能 off screen 操作。on screen 时，圆形菜单会出现在 Dial 的周围，而且会跟随 Dial 移动，操作相当直观，而 off screen 时，圆形菜单会以较小的形式出现。下图分别是 on screen 和 off screen 的模式：

 

对 Surface Pen 和 Surface Dial 有一个初步的认识后，我们就开始正式讲一下它们在 UWP 手绘视频创作工具中的应用。

首先是 Surface Pen，它除了可以完成鼠标的操作，如点击等之外；对于手绘视频应用更重要的是，笔记书画的功能。这里我们主要用到了 InkToolbar 和 InkCanvas，InkToolbar 是一个 Ink 工具条，支持自定义按钮，提供多种笔迹/直尺/圆角/橡皮擦等，而 InkCanvas 是用于显示 InkToolbar 选择的画笔绘制出来的笔迹的。这方面有很多文章有过系统的介绍，微软官网也有很多文章：https://docs.microsoft.com/en-us/windows/uwp/input-and-devices/pen-and-stylus-interactions,

在手绘视频中的使用，分为两个步骤：1. InkCanvas 绘制完成后，保存为 Ink 数据；2. 取出 Ink 数据，按照线条长度对拆分，保证每段线条不超过某个阈值，然后把拆分后的 Ink 序列传给 Win2D 去做动态绘制。

以上处理，只针对圆珠笔有效，而针对非圆珠笔，因为存在线条对笔尖角度的变换和半透明颜色的叠加，所以需要做一点处理，如铅笔、钢笔和荧光笔，需要在笔尖变换方向时做形状判断，在线条叠加时做颜色加深；另外针对荧光笔，它对被覆盖的颜色会有荧光的混色效果，实际是把被覆盖颜色修改掉的，需要使用 OpenCV 做混色的计算，还需要注意边缘的平滑处理。

除了系统提供的笔尖，我们也可以自己定义笔尖，这里简单提一下：笔尖有两个重要的属性需要定义，笔尖的形状和它的填充。既包括了笔尖的轮廓，也包括他的填充，如圆珠笔的原型轮廓，钢笔的椭圆形轮廓；圆珠笔的完全不透明填充，铅笔的离散点填充，荧光笔的半透明填充。定义了这些属性后，在 InkCanvas 中书写时，笔尖结合方向，决定了不同方向笔画的形状和不同的粗细，笔尖的填充，决定了在反复涂画时，是否有颜色加深处理。

接下来是 Surface Dial，它有几种操作：长按，短按和旋转，我们所有的操作都基于这几个操作。Surface Dial 提供了一个 Menu，长按 Dial 后呼出 Menu，我们需要把自定义操作的数据塞进 Menu 里，作为 Menu 的一个 Item，在 Dial 旋转到该 Item 时，短按后进入它的功能。可以是直接执行某些功能，也可以是进去另一个子 Menu。Dial 呼出时的 Menu 样式是不可以自定义的，所以我们如果要自定义 Menu 样式，只能作为子 Menu 出现，如上面 on screen 图所示，这个 Menu 就是一个完全自定义的颜色选择器。

因为子 Menu 可以完全自定义，所以我们可以想一下怎么制作这个 Menu，比如颜色选取，我们用一个圆形供用户旋转，短按后选择某个颜色，长按切换功能；为了兼容 off screen 和 on screen 模式，我们判断到 off 或 on 后，决定圆形的半径，在 off 时小一些，在 on 时留出 Dial 的尺寸。因为 Dial 的旋转操作方式，很多子 Menu 都选择了圆形的方式。

Ink 和 Dial 的介绍就到这里，我们更多的介绍它的应用场景，具体的实现代码大家可以去微软官方查看文档，实现过程相对简单，不做赘述了，谢谢！