Microsoft Tech Summit 2018 课程简述：利用 Windows 新特性开发出更好的手绘视频应用

概述

Microsoft Tech Summit 2018 微软技术暨生态大会将于10月24日至27日在上海世博中心举行，这也会是国内举办的最后一届 Tech Summit，2019 年开始会以 Microsoft Ignite Tour 的形式出现，大家可以在官网查看本次会议信息：https://www.microsoft.com/china/techsummit/2018/

今年非常荣幸最终入选了分会场课程，我会在 27日下午5点给大家带来 “利用 Windows 新特性开发出更好的手绘视频应用” 的主题分享，编号 NUE204。在本篇文章中，我会对本次课程的主要内容先做一次简单分享，方便大家提前了解，欢迎各位参会的伙伴过来一起交流探讨。

课程分享

课程概述

本次课程“利用 Windows 新特性开发出更好的手绘视频应用”，主要是分享手绘视频的基础功能开发过程，以及结合 Windows 10 新特性和 Surface 设备和周边硬件的特性，比如 Surface Pen 和 Surface Dial 的结合等，为 Windows 10 开发者和设计师提供更多的思路，设计开发出更好的绘画和视频制作类应用。

课程内容主要分为以下几个部分：

1. 关于手绘视频 - 讲解动画视频的分类，手绘视频的概念，以及来画 UWP 应用发展过程；
2. Windows 版本更新 - 回顾 Windows 10 的版本更新历史，以及更新中对手绘视频重要的功能；
3. 手绘视频应用开发 - 手绘视频开发的概述，以及几个重要功能的开发分享；
4. 结合 Windows 新特性和 Surface 配件的手绘视频 - Ink 和手绘视频的结合，Surface Pen 和 Surface Dial 的结合，Windows ML 的结合；以及 Windows Community Toolkit 推广；

下面我们分别对每部分内容做简单描述，在课程过程中需要展示的视频和内容详细分析，这里暂不展开，大家可以在课程上看到。

课程内容

1. 关于手绘视频

    手绘视频属于动画视频的一个分类，而动画视频从动画形式角度可以分为二维动画和三维动画。二维动画视频，可以分为 MG 动画、平面手绘动画和二维沙画动画；三维动画视频，可以分为三维拍摄动画、真人结合动画和三维虚拟生成动画；

    手绘动画视频，是在动画视频出现用真实的手或笔进行绘制或移动的各种文字，图片，声音，音乐的一个动画视频表现形式。手绘动画视频，又称手画视频或素描视频或白板视频。相比于其他类型的动画视频，手绘动画视频有以下几个特点：

• 一只手绘的手，可以把观看者的注意力集中；
• 手绘的动画过程，可以还原绘制和创作的过程；
• 非常适合做介绍，展示，讲解类动画视频；

    而来画 UWP 应用，正是一个手绘视频制作类工具应用，用户可以使用文字，手绘素材或手绘路径，结合背景音乐或配音，生成手绘效果丰富的手绘视频。这个应用在 2017年1月份正式发布了第一个版本，拥有基本功能，但是交互不够友好，功能实现和复杂功能支持也不够；而在 2017年8月份，我们完成了第一次重大改版，发布了 2.0 版本，对引擎进行了重构，整个交互过程而我自己也是在 5 月份入职，当时吸引我的正是手绘视频的新颖形式和广泛的应用场景，以及对一家做 UWP 应用公司的天然好感；经历了一系列小的迭代后，在2018年2月份发布了 3.0 版本，对视频文件的导入做了支持， 同时增加了模板的支持，Autodraw 和智能配音的支持；在这之后，半年的时间没有大的更新发布，因为我们在做一次大的改版，终于在 9月份时，4.0 版本发布。这个版本中，我们重新设计了整体的交互，增加了时间轴和更丰富的转场动画，支持了视频背景和视频元素，同时支持了 MG 动画素材和不同比例的视频创作。

2. Windows 版本更新

    Windows 10 从第一个版本在2015年7月份发布至今，已经有超过三年的时间，而 Windows 10 的装机量也已经超过了 7 亿。而在这三年时间中，也经历了多次重大更新，从最早的1507到现在的1809，Windows 10 SDK 也从 10240 更新到了17763。而其中很重要的一次更新，当数周年更新，也就是 1607（14393）版本了，这也是 Windows 10 SDK 第一个比较可用的版本。而来画 UWP 的第一个版本，也是从 14393 开始支持的。当然，因为 14393 SDK 支持了很多新功能，所以在后面的更新中，有些功能也发生了很多变化，导致系统升级后的支持问题。

    Windows 10 强调高效办公和创意创作，在推出 Surface 系列后，推出了 Surface Pen 新版和 Surface Dial。而 Windows 10 新特性中，InkToolbar 和 RadialController 都是从 14393 开始支持，它们是支持 Surface Pen 和 Surface Dial 硬件的重要功能。

3. 手绘视频应用开发

    手绘视频 UWP 应用开发，基于对不同手绘元素，如文字，SVG，位图，Ink 等的解析，基于 Win2D 的渲染方式进行动画展示，并基于类 FFMpeg 的方式进行动画视频的合成，以及声音的处理。 基础功能之上，还有对 Surface Pen 和 Surface Dial 硬件操作的结合；以及不同类型 Ink 元素处理，更多位图方式处理等。

下面分别对其中几个重要的功能点做简单描述：

1. Win2D

    Win2D 是基于 Windows Runtime 的 2D 图形 GPU 渲染 SDK，可以用在 UWP 、Windows Phone 和 Windows Runtime App 中， 编程语言可以是 C++、C# 或 VB。基于 D2D，实现了 XAML 和 CoreWindow 的无缝衔接。

2. 文字手绘

    文字手绘，是手绘视频里很重要的展现和表达方式，指的是用手写的方式按照文字的字体和它的结构笔顺等完成绘制的手绘动画形式。

    文字手绘，特别是汉字手绘，实现比较复杂。主要难点：汉字结构相比英文更加复杂，常用字数量也更多，所以实现路径还原比较有难度；手绘视频工具中，支持很多种不同的字体，笔顺、结构和笔画间的连接关系都不一样，增加了处理的难度；

3. SVG 手绘

    SVG 元素是一种矢量图形，因为它的矢量属性和文件组成，它的路径数据可以在手绘视频中被还原和绘制出来，是手绘视频中重要的元素。

    简单处理过程包括：SVG 元素的解析和静态展示；根据动画时长和路径直线总长度，计算每帧绘制的部分路径；按照计算结果绘制路径，完成后进行 SVG 填充色绘制。 

4. 位图手绘

     手绘视频制作过程中，很多场景需要使用用户的照片，为了让它有更丰富的动画效果，所以需要结合位图属性实现手绘效果。

    我们对位图的处理方式，可以实现简单的手绘效果，也就是从左上角到右下角来匀速涂抹出图片；也可以做进一步的处理，比如支持用户在位图的背景上做进一步的线条勾勒，保存为 SVG，绘制时是背景图被勾勒出来的效果；另外就是利用 OpenCV 做边缘检测，绘制过程中描绘边缘的路径；

5. Ink 手绘

    Ink 手绘在手绘视频中有很多应用场景，如绘图手绘，手写文字手绘，有丰富的笔触类型支持，如铅笔的墨粉效果，钢笔的笔触方向和粗细，荧光笔的混色效果等动画展示。

    简单的处理过程包括：利用 InkCanvas 完成绘制后，保存 Ink 数据；获取 Ink 数据，按照 SVG 绘制原理进行绘制；自定义笔触的实现，数据存储和绘制方式。 

6. 视频导出

     手绘视频制作，在素材编辑和动画设置完成后，需要用户进行效果预览和动画视频导出，把动画导出为 MP4 或其他视频文件格式。

    简单的处理过程包括：利用 Win2D 进行后台视频渲染，并按帧率进行截图操作；类 FFMpeg 方式把图片序列生成视频文件；对背景音乐以及插入视频的音轨进行处理 

4. 结合 Windows 新特性和 Surface 配件的手绘视频

    本节会结合 Windows 10 新特性和 Surface 系列的硬件的特性，分享手绘视频应用能实现的更多可能性，给大家提供更多的思路，如何利用这些特性去做更好的 UWP 应用。下面简单介绍一下各个新特性，以及和手绘视频的结合方式。

1. Windows Ink

    Windows Ink 平台与笔设备一起提供了一种创建数字手写便笺、绘图和批注的自然方法。 该平台支持将数字化器输入捕获为墨迹数据、生成墨迹数据、管理墨迹数据、在输出设备上以笔划墨迹形式呈现墨迹数据以及通过手写识别将墨迹转换为文本。而平台的组件包括 InkCanvas 和 InkToolbar，利用它们可以完成 Ink 的接收和显示，以及笔触的选择、粗细和颜色的选择等操作；

2. InkCanvas 和 InkToolbar

    InkCanvas 定义了一个可以接收和展示所有笔输入的区域，包括了墨迹笔画和橡皮笔画等；InkToolbar 定义了一个控件，其中包含可自定义且可扩展的按钮集合，这些按钮可激活关联 InkCanvas 中与墨迹相关的功能。在课程过程中，会对这部分做代码和实现效果的演示，本文中暂不展开。

3. Ink 结合手绘

    Ink 和手绘视频的结合，主要有以下几种方式：利用 InkCanvas 和 InkToolbar 实现 Ink 的获取和存储；自定义圆形菜单，实现 Ink 的选择，设置和绘制数据获取；利用系统支持的笔触，计算路径数据的手绘结果，实现手绘效果；自定义笔触，存储笔触数据，实现路径计算和叠加算法，实现手绘效果。

4. Surface Pen 

    目前 Surface 配置的 Surface Pen 是第三代产品，和 Surface Pro 系列一起推出，可以吸附在 Surface 上 ，拥有 1024 级压感，更精确的书写和绘画体验。

    与手绘视频的结合包括：实现点选操作，代替鼠标或手指；在 Ink 中作为文字和笔划输入，或橡皮擦除笔划；利用 Surface Pen 能够更好的发挥 Ink 的作用，实现不同的笔触和线条，不同的压感，并把这些线条实现手绘动画；

5. Surface Dial

    2016年10月份，和 Surface Studio 一起发布；用于绘画/制图和其他操作中，非主要手的快捷操作；一手持笔，一手控制 Dial 旋钮；

    也手绘视频的结合包括：实现 Dial 默认操作，包括声音调整和其他系统操作；通过 RadialController 添加自定义菜单，结合 Dial 的点按和旋转操作，实现自定义功能；自定义以及菜单点按后，进入自定义二级菜单，样式和功能都可以自定义；

6. Windows Machine Learning

    2018 Windows Developer Day 发布，利用 Windows Machine Learning，开发者可以把模型集成到 Windows 应用中。

    来画 UWP 应用中结合了 Autodraw 功能，可以通过人工智能图像识别技术，识别用户绘制的线条，推荐素材供用户使用。而 Windows ML 可以实现模型本地化，可以把 Autodraw 训练的模型集成在 UWP 应用中，减少网络传输时间，降低服务器负载，本地实现计算过程。

7. Windows Community Toolkit

    微软官方的一个 UWP 社区工具包，后来扩展为 Windows 全平台；2016 年 8月第一个版本，目前是 4.0 版本；不断的在吸收对 Windows 平台有用的功能，不断的完善。 这个工具包中有很多 Windows 开发者的参与，对开发有很大的帮助，希望大家也可以参与进来；

总结

本篇我们对 Tech Summit 上会分享的课程做了简单的介绍，一些详细的分析和演示暂未体现，算是卖个小关子吧。如果大家对手绘视频、UWP 应用或者 Windows 生态感兴趣，欢迎参加 27 日下午5点的课程，大家一起交流研讨，感谢大家的阅读！

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px "PingFang SC"; color: #ffffff } span.s1 { } span.s2 { font: 22.0px Helvetica }

定义了一个控件，其中包含可自定义且可扩展的按钮集合，这些按钮可激活关联 InkCanvas 中与墨迹相关的功能。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px "PingFang SC"; color: #ffffff } span.s1 { } span.s2 { font: 22.0px Helvetica }

定义了一个控件，其中包含可自定义且可扩展的按钮集合，这些按钮可激活关联 InkCanvas 中与墨迹相关的功总结