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點的課程，你們一塊兒交流研討，感謝你們的閱讀！

定義了一個控件，其中包含可自定義且可擴展的按鈕集合，這些按鈕可激活關聯 InkCanvas 中與墨跡相關的功能。

定義了一個控件，其中包含可自定義且可擴展的按鈕集合，這些按鈕可激活關聯 InkCanvas 中與墨跡相關的功總結