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 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 的介紹就到這里，我們更多的介紹它的應用場景，具體的實現代碼大家可以去微軟官方查看文檔，實現過程相對簡單，不做贅述了，謝謝！

視頻

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。