平滑svg路徑連接

Question

我有一個隨機的點集，並希望創建一個與raphaeljs光滑的SVG形狀。 要連接點，我正在使用catmull-rom-spline。問題是路徑關閉的點不平滑。

這是一個示範路徑從我projcet的：

M125,275R 125,325 175,325 225,325 275,325 225,275 175,275 125,275Z 

我還創建了一個的jsfiddle：http://jsfiddle.net/ry8kT/

可以這樣用卡特莫爾曲線實現？ 如果沒有，請給我一個例子如何獲得完全平滑的形狀？

使用的Catmull Rom樣條我使用的二次曲線和計算的中點相反的：

許多在此先感謝， 麥克法蘭

Answer 1

在你的第一個例子中，路徑開始在125275和在125275再次關閉之前。因爲'Z'創建了連接起點和終點的另一個平滑路徑段，所以您會得到這個小循環。如果您在返回起點之前將其關閉，則會獲得所需的平滑形狀，並觸及所有給定的點。

這是示例路徑的修正版本：

M125,275R 125,325 175,325 225,325 275,325 225,275 175,275Z 

Answer 2

我固定它自己。 請注意，如果要繪製平滑的形狀，該解決方案將僅適用，但如果路徑必須直接穿過點，則不適用。

這是它如何工作的：

第一： 設置線開始，到第一點之後緊接着一個的moveTo命令

M point1.x,point1.y M 

這是封閉路徑，而不邊緣重要。

現在循環通過量你並添加計算中點bewtween當前和下一個點，然後用下一個點作爲控制二次曲線的每一點：

mid.x,mid.y C next.x,next.y 

你計算A和B之間的中點M使用此：

M.x = (A.x-B.x)/2 + B.x 
M.y = (A.y-B.y)/2 + B.y 

通過所有點後的循環，你必須創建到第一和第二點與第一個對照組中點二次曲線：

C first.x,first.y mid.x, mid.y 

現在使用 - Z關閉您的路徑，以便您可以填寫形狀：

Z 

這方面是因爲在路徑的開頭兩個的moveTo命令不可見。

看到我的解決方案的結果和源代碼訪問更新的jsfiddle： http://jsfiddle.net/ry8kT/1/