前面我們針對 SVG 的解析和繪製做了介紹，SVG 是圖片的一種形式，而另一種很重要的圖片是：點陣圖，包括 png、jpeg、bmp 等格式。點陣圖的基本規則是，組成的基本元素是像素點，由寬度 * 高度個像素組成，每個像素存儲了一個點的顏色和位置信息，顏色信息可以是 ARGB、RGBA、BGR 或 YU ...
前面我們針對 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的過程一樣。
上述的兩種處理方式，一個是由系統來檢測點陣圖的邊緣，另一個是由用戶來指定邊緣，我們計劃把兩種方式結合在一起，先由系統檢測，再由用戶補充和糾正，這樣可以減少用戶操作的難度，因為有些點陣圖的邊緣會很複雜。另外系統檢測的一個缺點就是，邊緣路徑是完全無序，沒有分組的，就是說路徑不會按照物體的區別分組繪製，也不會按照某個固定順序繪製，這都需要我們後續再去處理，根據邊緣路徑的相連屬性去分組，在根據方向上的某個順序去處理排序，當然這還是一種簡單粗暴的處理方法。更深一層的處理，應該是檢測邊緣時，識別物體分類，也就是物體是什麼？然後根據這些信息分組和按照分類去排序。這些都是我們後面要做的事情。
點陣圖的處理方式就介紹到這裡了，如果大家有好的處理方法，或者有好的想法，歡迎聯繫我，感謝！
