概述

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 中與墨跡相關的功總結