本篇作為技術分享系列的第四篇，詳細講一下手繪視頻中 Surface Pen 和 Surface Dial 的使用場景。 先放一張微軟官方商城的圖，Surface 的使用中結合了 Surface Pen 和 Surface Dial。 Surface Pen 的使用場景不難想象，就像 iPad 和 A ...
本篇作為技術分享系列的第四篇，詳細講一下手繪視頻中 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 的介紹就到這裡，我們更多的介紹它的應用場景，具體的實現代碼大家可以去微軟官方查看文檔，實現過程相對簡單，不做贅述了，謝謝！
