將位圖字符轉換爲三角形

Question

我正在嘗試使用html canvas元素將字體文件中可用的每個字符繪製到畫布上。爲了使這個問題儘可能簡單，假裝只有一個字符被繪製到畫布上。從那裏，我想用Javascript來分析畫布並創建組成整個角色的畫布三角形區域。我在三角形中需要它的原因是，稍後可以將數據發送到WebGL，以便呈現文本並且不會丟失數據，從而縮放文本大小。

我正在尋找某種算法來完成這項工作，或者至少有一些知識讓我朝着正確的方向前進。如果您認爲我應該使用不同的方法，請告訴我爲什麼，但我認爲這將是最好的方式來提供修改文本的方式，並可以創建3d塊文本。

Answer 1

下面是關於如何繪製着色器與分辨率無關的曲線文章

http://research.microsoft.com/en-us/um/people/cloop/loopblinn05.pdf

我的理解是不是破成三角形，你打破他們成四邊形與足夠的信息在頂點排序以繪製形狀每個四邊形內部的曲線部分。換句話說，當着色器繪製每個四元組時，會有一個公式，如果該像素位於曲線內部或曲線外部，則可以計算每個像素的公式。

Answer 2

我建議你從關鍵字Polygon Triangulation開始。

使用這種方法，你可以正多邊形分割成三角形就像這樣：

這些方法可能只適用於與真正的（而不是四捨五入）的邊緣人物。

Answer 3

所以，你試圖將光柵圖像轉換爲矢量數據？ 放大時，會導致看起來非常鋸齒狀的幾何圖形。 由於每個像素都被視爲幾何體的方形邊緣部分。

難道你不能親自操作你正在繪製的每個字形的原始矢量（貝塞爾曲線）幾何？

將其轉換爲三角形條和風扇看起來會更平滑。