將SVG路徑轉換爲線段

我試圖將SVG路徑轉換爲節點中的點列表。我使用elementtree來解析SVG文件。將SVG路徑轉換爲線段

d是路徑的定義，getPos只是將一個「x，y」變成一個帶有x和y的對象，doLine只是將該座標添加到列表中。

d = path.get('d') 

    words = d.split(' ') 

    oldPos = undefined 
    startPos = undefined 

    for i in [0..words.length] 
    word = words[i] 

    if word == 'm' or word == 'M' 
     oldPos = getPos(words[i + 1]) 
     startPos = getPos(words[i + 1]) 
     i += 1 

    else if word == 'l' or word == 'L' 
     console.log('done nothing...') 

    else if word == 'z' or word == 'Z' 
     doLine(oldPos, startPos) 

    else if word 
     pos = getPos(word) 
     doLine(oldPos, pos) 
     oldPos = pos

目前，這似乎不能正常工作。

我知道我的路徑永遠不會有曲線，所以我不必擔心這一點。

我不確定SVG標準，所以如果有人能幫助我，那將是很多的感謝。

來源

2012-02-01 Tom Leese

SVG包含自己的路徑parser爲什麼重新發明輪子。試試建立在此：http://jsfiddle.net/longsonr/skWH5/

在gecko中，通過從一開始就讀取一個非空白字符，然後使用一個期望的參數數目表來讀取如此多的數字（可能最多有一個逗號將它們分開）。這一直持續到字符串的結尾。

來源

2012-02-01 21:02:13

我真的沒有在網上做這件事，是否有可能從獨立的node.js訪問這些功能？ – 2012-02-01 21:18:46

你可以在這裏看到用C++編寫的底層mozilla路徑解析器代碼：http://mxr.mozilla.org/mozilla-central/source/content/svg/content/src/SVGPathSegListSMILType.cpp#319有幫助嗎？ – 2012-02-01 21:33:05

這有幫助，謝謝。我會仔細看看。 – 2012-02-01 21:45:51

我對coffeescript不熟悉，但是您的代碼似乎存在一些問題。

最重要的是，它似乎是你的我+ = 1只發生如果Word ==「M或‘M’，所以我還以爲你會卡在大部分時間循環。
其次，如果word =='l'或'L'，我似乎不會做任何事情，但我會盡可能地想要添加節點。如果你沒有曲線，那麼你肯定有線條，除非你只是使用水平線或垂直線。您還需要更新您的當前位置，並根據它是相對命令還是絕對命令進行不同的操作。
最後，您可能不應該用空格拆分，因爲d="M90,20L100,30L110,20z"是有效的路徑。你說你知道你的道路上沒有曲線，所以也許你也知道所有的道路都會被空間分割。在這種情況下，這很公平，但可能值得銘記。

希望這有些幫助。

來源

2012-02-02 12:22:55

i + = 1用於跳過單詞，因爲下一個單詞將成爲座標。我不會陷入循環中，因爲「for in in [0 ... length]」使coffeescript循環遍歷列表。我使用的是Inkscape來創建SVG文件，它們似乎總是被文字分割，我不知道沒有空格是有效的。 – 2012-02-02 19:48:01

將SVG路徑轉換爲線段

回答

相關問題