UWP 手繪視頻創做工具技術分享系列 - 位圖的繪製

前面咱們針對 SVG 的解析和繪製作了介紹，SVG 是圖片的一種形式，而另外一種很重要的圖片是：位圖，包括 png、jpeg、bmp 等格式。位圖的基本規則是，組成的基本元素是像素點，由寬度 * 高度個像素組成，每一個像素存儲了一個點的顏色和位置信息，顏色信息能夠是 ARGB、RGBA、BGR 或 YUV 等組成。在手繪視頻中，位圖也是一種很重要的表現形式，由於咱們在網上下載的圖片，或者本身拍攝的照片，都是位圖形式，咱們能夠用它來作成相冊類型的視頻等等。下面看一個用戶使用來畫Pro製做的視頻中的截圖，用戶製做的是一個旅遊方面的視頻，每一個景點的圖片都是位圖，人物也有一部分位圖，這就是位圖在手繪視頻中的一種表現形式：

 

下面來詳細介紹一下位圖在手繪視頻中的普通繪製方式：

通常來說，若是對於位圖的處理會簡單粗暴一些，就是採用一種默認的方式，而不是圖片信息包含的路徑數據（由於位圖自己沒有路徑數據），來繪製位圖，好比從位圖的左上角開始，按照固定的間隔繪製直至位圖的右下角完畢。繪製過程效果以下圖：

  

咱們看到上面一張 png 位圖的繪製過程，從左上角開始，以某個角度的傾斜完成左到右的畫筆描繪，而以另外一個相近的角度完成從右到左的畫筆繪製，最終到完成整個位圖的繪製。而這整個過程的處理流程和示意圖以下：

其中，初始化圖片資源和動畫路徑數據，分別用到 CanvasBitmap 和 CanvasGeometry；而轉換繪製動畫路徑的點集使用 CanvasGeometry.ComputePointOnPath(float distance)，最終獲得的 distance 就是繪製的總長度；而繪製過程使用的是 CompositeEffect。

以上是所謂簡單粗暴的處理方式，做爲一個 bige 高的專業工具，怎麼可能沒有專業的處理方式呢，往下看：

在應用內，咱們提供了兩種方式來獲取位圖的路徑數據，一種是利用 OpenCV 獲取圖片的物體邊緣數據，另外一種是讓用戶本身定義想以怎樣的路徑描繪位圖。

第一種很容易理解，首先膜拜一下 OpenCV，計算機視覺方面的神器，咱們這裏使用的就是 OpenCV 的邊緣檢測方法，它和圖像平滑算法相反，是一種「高通濾波器」，去檢測圖像中像素跨度很大的點組成的邊緣，例如物體景觀的深度不連續，多面體表面方向的不連續，光照和陰影的臨界，物體表面材質不一致的臨界等，使用的方法有 Sobel，Laplacian 和 Canny，咱們使用的是 Canny，效果以下圖：

  

位圖按照檢測到的邊緣路徑一點點描繪出來，只有路徑劃過的地方纔顯示位圖，這樣就有了路徑描繪的視覺感覺。其實這也是畫師在素材製做中一種很常見的方式，在 PS 中處理靜態圖片的特效，處理完成後保存導入到 AI 中，在靜態圖片上面描畫透明路徑，描繪完成後保存成 SVG 文件。這就是一種比較特殊的 SVG，包含了一張位圖做爲底圖，而透明路徑的做用，是在路徑描繪時，顯示路徑對應位置的位圖像素。

另一種方式，更多的由用戶本身來操做實現，至關於把咱們的應用看成 AI，用戶本身準備的靜態圖片，放到應用中進行上面所說的路徑描繪，而後直接導入到應用內做爲 SVG 使用。應用的界面和操做以下：

  

上面圖1是用戶操做界面，用戶能夠指定畫筆的粗細來描繪路徑，描繪完成後，會以圖2到圖3的過程來描述位圖。如圖1中咱們指定的路徑是先畫頭像的邊框，再用粗的畫筆描繪頭像的填充，就如圖2和圖3的過程同樣。

上述的兩種處理方式，一個是由系統來檢測位圖的邊緣，另外一個是由用戶來指定邊緣，咱們計劃把兩種方式結合在一塊兒，先由系統檢測，再由用戶補充和糾正，這樣能夠減小用戶操做的難度，由於有些位圖的邊緣會很複雜。另外系統檢測的一個缺點就是，邊緣路徑是徹底無序，沒有分組的，就是說路徑不會按照物體的區別分組繪製，也不會按照某個固定順序繪製，這都須要咱們後續再去處理，根據邊緣路徑的相連屬性去分組，在根據方向上的某個順序去處理排序，固然這仍是一種簡單粗暴的處理方法。更深一層的處理，應該是檢測邊緣時，識別物體分類，也就是物體是什麼？而後根據這些信息分組和按照分類去排序。這些都是咱們後面要作的事情。

位圖的處理方式就介紹到這裏了，若是你們有好的處理方法，或者有好的想法，歡迎聯繫我，感謝！