本篇作為技術分享系列的第二篇，詳細講一下文字的解析和繪制，這部分功能的研究和最終實現由團隊共同完成，目前還在尋找更理想的實現方式。

首先看一下文字繪制在手繪視頻中的應用場景

? ? 文字是手繪視頻中很重要的表現形式，應用場景很廣，比如字幕、旁白和一些重要的文字說明提示。和普通視頻，如 MV、電影等使用某一種固定字體，如宋體、微軟雅黑字體不同的是，在手繪視頻中，我們通常會使用一些很有個性化的字體，如毛筆字體、卡通字體和很多手寫字體。另一個很大的區別，電影等中的問題，是整體出現的，不存在繪制的過程，所以只需要按照字體顯示；而手繪視頻中的文字，通常是以手繪的形式展出來的。下面兩張圖片分別是一個電影截圖中的字幕和手繪視頻中的一種火柴字體。

? ?

接下來介紹文字繪制的幾種方案

? ? 文字的靜態顯示過程，是通過讀取特定字型的字體文件（ttf）中對應文字的矢量路徑數據，以顯示在屏幕上對應像素上的。對于不同的字型，文字的形狀是不一樣的，所以對應文字的路徑數據也是不同的。因為是矢量路徑數據，所以在放大和縮小時，文字才不會失真。

? ? 文字的繪制，實際上是把文字對應的某種路徑，按照時間和某種順序描繪出來。下面介紹的幾種市面上常見的方案都是基于這種方式：

1. InkScape 等文字轉換路徑的軟件的繪制方式

? ? Inkscape是開源的矢量圖像編輯軟件，與Illustrator、Freehand、CorelDraw 等軟件很相似，它使用 W3C 標準的 SVG 文件格式。它支持把輸入的文字，按照字體大小，輪廓粗細，文字顏色等生成一個 SVG 文件。上一篇我們介紹了 SVG 的繪制方式，所以這里不贅述，我們主要來分析一下 InkScape 生成的 SVG 的數據來源和構成。雖然 InkScape 是比較主流的處理軟件，但是它對文字的路徑數據處理其實還是比較初級的方式：它會直接獲取文字在 ttf 中存儲的路徑數據，未做特殊處理。而這種路徑數據，雖然能準確的勾勒出文字，但是缺點也很明顯，首先 ttf 路徑是文字的邊緣路徑，換句話說它是圍著文字的周邊描繪的，而不是正常的筆跡；其次 ttf 中的路徑是完全沒有順序可言的，完全沒有正常筆跡構成的文字筆畫和筆順，所以整體來說它是不理想的。

? ? 下面是一個文字 ”二“ 和 ”四“ 在 Inkscape 中繪制的原理，它會直接獲取如圖中藍色箭頭組成的路徑，而最終繪制時的順序也如藍色箭頭一樣。因為 ”二“ 字由兩個簡單的橫組成，所以筆順還算正常；再來看 ”四“ 字，它的路徑順序跟筆順完全不同，而是簡單的把一些封閉圖形勾勒出來，所以對于文字來說，這種繪制方式不夠理想。

??

2. VideoScribe 的文字繪制方式

? ? VideoScribe 是一個老牌的英國公司，所做的事情也是手繪視頻軟件。它在文字繪制方面的表現，和真實的筆跡基本吻合，但是只針對英文字母和數字，并不支持漢字和其他文字。這里說明一下為什么英文和數字會更容易實現，其實也很好理解，英文字母大小寫加起來只有 52 個字母，而數字一共只有 0-9 十個數字。所以針對英文字母和數字的繪制，可以預先針對每種字體，準備好這 52+10 個特定的路徑，繪制時獲取對應的文字和字體來繪制和顯示。之所以不做漢字的適配，一方面是 VideoScribe 并沒有重點推廣中國市場，最主要的還是，漢字遠比英文的情況復雜，漢字常用字就超過 3500 個。雖然它們都是由固定的十幾個偏旁部首組成的，也有一些途徑可以拿到每個漢字的筆畫和筆順，但是想得到某個漢字的每個筆畫的相對位置，就沒有辦法了，所以想按照部首來組成漢字的路徑，也就行不通了，這也是我們目前遇到的瓶頸。

3. 我們目前的實現方式

我們的實現方式，是基于文字的邊緣路徑，通過算法得到邊緣中央的路徑，也就是筆跡的路徑，然后進行一定的重新排序和分組，得到最終繪制的路徑進行繪制。

?

其中中間四個步驟的示例圖如下：

4. 我們正在開發的方式

? ? 如上面說到的，漢字的繪制，最大的問題在于文字過多，而每種字體的表現形式又有很大差異，通過獲取筆順的方式，很難匹配到多種字體中。我們目前正在嘗試的方式是：

? ? ① 通過一些合作網站獲取的一種正規字型的字體的路徑數據，如微軟雅黑這種沒有筆畫附加路徑的字體，我們稱為基礎路徑

? ? ② 獲取常見漢字的筆順和筆畫組成

? ? ③ 對于每種字體，準備十幾個部首的路徑數據，覆蓋所有漢字，我們稱為部首路徑

? ? ④ 繪制時針對每個漢字，先取得筆順中對應的筆畫，對應取得基礎路徑中對應筆順的起點，在從部首路徑中取得對應部首。

? ? ⑤ 以筆順起點為起點，通過指定的縮放率，繪制這個部首。這樣對每個部首做處理，就完成了文字的繪制。

這種做法，可以完成大部分字體的文字繪制，缺點時首先要獲取到合適的基礎路徑數據，這點已經完成；其次是如果每種字型的部首起點差異較大，那么效果就不會特別理想。所以我們還在嘗試更多的繪制方式，以達到針對每種字體的漢字的繪制。

?

?文字的解析和繪制方式就介紹到這里，目前雖然由解決方式，但是每種方式都有自己的問題，都不夠理想，如果大家有更好的方式，歡迎和我交流，謝謝！

?

轉載于:https://www.cnblogs.com/shaomeng/p/7537979.html

總結

以上是生活随笔為你收集整理的UWP 手绘视频创作工具技术分享系列 - 文字的解析和绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。