在JavaScript中將svg路徑轉換爲多邊形

我想將一個svg路徑轉換爲javascript中的svg多邊形。我發現這個函數沿路徑爬行並提取其座標。在JavaScript中將svg路徑轉換爲多邊形

var length = path.getTotalLength(); 
    var p=path.getPointAtLength(0); 
    var stp=p.x+","+p.y; 

    for(var i=1; i<length; i++){ 

     p=path.getPointAtLength(i); 
     stp=stp+" "+p.x+","+p.y; 

    }

這個工作原理，但它返回幾百點，原來只有六點的多邊形。我怎麼會只得到必要的點（所有的路徑是直線，沒有曲線）

來源

2013-04-12 aushilfe444

我敢打賭，您需要確定自上次迭代以來x或y值之一發生了變化，這意味着方向發生了變化。只有這樣你才能抓住這一點。 – Ian

可以減少點數，但它仍然在1000點左右..我需要6. – aushilfe444

你能夠提供一個帶有SVG和代碼的jsFiddle嗎？ – Ian

確定了它..函數getPathSegAtLength（）返回實際路徑段的數量。那很容易。

var len = path.getTotalLength(); 
    var p=path.getPointAtLength(0); 
    var seg = path.getPathSegAtLength(0); 
    var stp=p.x+","+p.y; 

    for(var i=1; i<len; i++){ 

     p=path.getPointAtLength(i); 

     if (path.getPathSegAtLength(i)>seg) { 

     stp=stp+" "+p.x+","+p.y; 
     seg = path.getPathSegAtLength(i); 

     } 

    }

來源

2013-04-12 16:03:32 aushilfe444

遍歷段，使用這樣的：

var segList = path.normalizedPathSegList; // or .pathSegList 

for(var i=1; i<segList.numberOfSegments; i++){ 
    var seg = segList.getItem(i); 
}

如果你想減少頂點的數量，那麼你可以使用Simplify.js作爲described here。

來源

2013-04-12 16:12:17

path.getPointAtLength()適合粗糙的目的，你不需要速度和質量。如果你得到每一個像素，你會得到數千個點，但質量仍然很低，因爲SVG路徑可以有十進制值，例如。 0.1，0.2。

如果你想通過調用更高的精度例如。 path.getPointAtLength(0.1)您可以在複雜路徑中輕鬆獲得數萬個點，並且該過程持續數秒或數十秒。之後，你必須減少點的數量（https://stackoverflow.com/a/15976155/1691517），這又持續了幾秒鐘。但如果刪除了錯誤的分數，質量仍然很低。

更好的技術是首先將所有路徑段轉換爲三次曲線，例如。使用Raphael's path2curve（），然後使用一些自適應方法（http://antigrain.com/research/adaptive_bezier/）將立方片段轉換爲點，並同時獲得速度和質量。之後，不需要減少點數，因爲自適應過程本身具有調整質量的參數。

我已經做了所有這些功能，並且我將在足夠優化速度時發佈它。經過數千條隨機路徑的測試後，質量和可靠性似乎達到100％，速度仍然快於path.getPointAtLength()。

來源

2013-04-25 08:11:29

謝謝你的努力，但在我的情況下，我只用直線工作，正如我所說，所以這不會是必要的 – aushilfe444

@Timo - 你有沒有發佈你的算法？ – jhamm

@jhamm這可能會對您有幫助。 http://stackoverflow.com/a/15890424/1691517 –

在JavaScript中將svg路徑轉換爲多邊形

回答

相關問題