前面我們針對 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的過程一樣。
上述的兩種處理方式，一個是由系統來檢測位圖的邊緣，另一個是由用戶來指定邊緣，我們計划把兩種方式結合在一起，先由系統檢測，再由用戶補充和糾正，這樣可以減少用戶操作的難度，因為有些位圖的邊緣會很復雜。另外系統檢測的一個缺點就是，邊緣路徑是完全無序，沒有分組的，就是說路徑不會按照物體的區別分組繪制，也不會按照某個固定順序繪制，這都需要我們后續再去處理，根據邊緣路徑的相連屬性去分組，在根據方向上的某個順序去處理排序，當然這還是一種簡單粗暴的處理方法。更深一層的處理，應該是檢測邊緣時，識別物體分類，也就是物體是什么？然后根據這些信息分組和按照分類去排序。這些都是我們后面要做的事情。
位圖的處理方式就介紹到這里了，如果大家有好的處理方法，或者有好的想法，歡迎聯系我，感謝！