2012-11-30 93 views
8

我想將描邊路徑轉換爲填充對象。 (以編程方式,在JavaScript中)如何獲取中風的輪廓?

該行只是一條簡單的曲線,即一系列座標。我可以將這條線作爲一條路徑,並給它一定的厚度......但我試圖獲得一個填充的形狀而不是一條描邊線,以便我可以對它進行進一步的修改,例如翹曲它,所以產生的'中風'可能會有所不同厚度或有自定義位切掉它(這些東西都可能與一個真正的SVG中風,據我所知)。

所以我試圖手動'變厚'一條線變成一個堅實的形狀。我找不到任何這樣做的功能 - 我瀏覽了D3.jsRaphaël的文檔,但沒有運氣。有沒有人知道這樣做的圖書館/功能?或者更好:如果有人能夠向我解釋關於如何手動完成這項任務的幾何學理論,通過列出我所擁有的座標系列並制定出一條有效「撫摸」它的新路徑,會很棒。換句話說,瀏覽器當你告訴它描述一條路徑時會做什麼 - 它是如何算出筆畫應該是什麼形狀的?

回答

3

已經有最近有類似的問題: svg: generate 'outline path'

總而言之,這是一個不平凡的任務。正如我在關於鏈接問題的回答中所提到的,PostScript具有生成路徑的命令,這些路徑產生與筆畫基本相同的輸出,稱爲strokepath。如果你看看Ghostscript在鏈接問題中發佈的代碼時吐出了什麼,這非常難看。即使Inkscape也沒有做得很好。我只是嘗試了Path => Inkscape中的Outline筆劃(我認爲這就是英文字幕應該說的),出來的東西看起來與描邊路徑看起來不一樣。

「最簡單」的情況是,如果你只有非自相交的多段線,多邊形或不包含曲線的路徑,因爲一般情況下,你不能在右側畫出精確的「平行」Bézier曲線,一個非平凡的Bézier曲線的左側將劃定描邊區域 - 這在數學上是不存在的。所以你必須以某種方式來近似它。對於直線段,可以比較容易地找到確切的解決方案。

渲染具有曲線/弧線的矢量路徑的經典方法是用足夠平滑的折線來逼近所有東西。 De Casteljau's Algorithm通常用於將貝塞爾曲線轉換爲線段。 (這也基本上是在Ghostscript中使用strokepath命令時出現的。)然後,您可以使用適當的linejoin和miterlimit規則查找分隔平行線段,但必須正確連接它們。當然,不要忘記linecaps。

我認爲自相交的路徑可能會非常棘手,因爲您可能會在路徑中留下空洞的區域,即黑道的「交叉區域」可能會變白。這在使用nonzero winding rule時可能不是開放路徑的問題,但我會對此謹慎。對於封閉路徑,您可能需要兩個「定界」路徑以相反的方向運行。但我現在還不確定這是否真的涵蓋了所有潛在的隱患。

對不起,如果我引起了很多混亂,也許沒有太大的幫助。

1

標準方法是Tiller-Hanson算法(二維輪廓的偏移量,1984,它刺激地不在線免費),這產生了很好的近似值。這個想法是因爲每條貝塞爾曲線的控制點位於與曲線起點和終點相切的線上,所以平行曲線具有相同的屬性。所以我們抵消了曲線的開始和結束,然後使用這些交點找到新的控制點。但是,對於尖銳的曲線,這會產生非常糟糕的結果,所以第一步是平分原始曲線,這對Bezier曲線非常容易,直到它轉過一個足夠小的角度。需要其他改進來處理(i)平行線之間的交點,在每個頂點的內部; (ii)插入圓弧以填充每個頂點外側的間隙;和(iii)添加封底 - 方形,屁股或圓形。

Tiller-Hanson很難實現,但在FreeType庫中有一個很好的開源實現,在ftstroke.c中(http://git.savannah.gnu.org/cgit/freetype/freetype2.git/樹/ SRC /鹼/ ftstroke.c)。

很遺憾地說,集成這些代碼可能相當困難,但我已經成功地使用了它,並且運行良好。

1

這個頁面在貝塞爾曲線上有一個相當不錯的教程,通常在偏移曲線上有一個很好的部分。

http://pomax.github.io/bezierinfo/

不太精確的,但有可能更快速的方法可以在這裏找到。

http://seant23.wordpress.com/2010/11/12/offset-bezier-curves/

沒有數學答案,因爲平行於貝塞爾曲線的曲線不是一般的貝塞爾曲線。大多數方法都有退化情況,特別是在處理一系列曲線時。

想象一個沒有麻煩點的簡單曲線。沒有尖點,沒有圈,沒有拐點,理想情況下嚴格增加曲率。把所有的起始曲線都打成這些簡單的曲線。找到這些簡單曲線的所有偏移曲線。將所有偏移曲線重新放在一起處理差距和交點。如果您有選擇使用它們,則二次曲線更容易處理。

我認爲大多數瀏覽器都做類似於處理js的事情,因爲即使使用二次曲線它們也會退化。例如,查看厚度爲100或更大的曲線200,300 719,301 500,300。