用控制點關閉SVG路徑（Z）？

開始：

M x, y

添加曲線

Q x1, y1, x, y

等等等等....當我想結束路徑我只是添加Z

但是最後一條線段現在沒有任何控制點。

我該如何關閉路徑並在最後一個段上也有控制點？

類似於：Z Q x1, y1其中Z關閉路徑（當前點到第一個點），但它使用x1和y1作爲控制點，而不僅僅是直線。

來源

2012-04-17 vale4674

我明白你的願望。每次我在Illustrator中畫一個手繪斑點時，我總是在原始點上設置最後一個點，然後通過拖動爲任一側上的控制點創建一個切線。

SVG沒有這樣的功能。沒有path command這樣做。最接近的是簡寫的路徑命令S和T，但這些派生從上以前命令的最後一個控制點第一控制點，而你想要的是什麼，從第一控制導出秒控制點指向下一個命令（環繞式）。

你可以用JavaScript來做到這一點，例如，標記像

<path d="… Z" class="smooth-close" />

...和查找所有smooth-close路徑的小腳本，確定從第一命令相應的控制點，併產生S或T命令，並將其追加到路徑數據。但由於您沒有用javascript標記您的問題，我認爲這樣的解決方案不會讓您感興趣。

來源

2012-04-18 03:17:45 Phrogz

我沒有將它標記爲JavaScript，因爲我想知道SVG是否支持它。我使用fabricJS在畫布上繪製路徑，其行爲與SVG完全相同。我可以添加一個線形當前點到第一個點，然後在視覺上關閉路徑，然後調用Z.但是仍然會留下那條沒有控制點的線。 – vale4674 2012-04-18 15:07:10

FWIW如果您使用Adobe Illustrator從兩點（和四個控制點）創建一個橢圓，則會獲得像「M0,0 c0，-50,100，-50,100,0 S0,50,0,0 z」這樣的路徑數據;所以，它按照我上面描述的JavaScript進行了描述，用一個恰好與第一個控制點相切的控制點手動關閉曲線。然後，如你所說，它仍然會拋出一個（多餘的）零距離「z」來正式關閉路徑。 – Phrogz 2012-04-18 15:35:28

我按照我所描述的做了。我只是添加了正常的曲線，但爲曲線的最終，我給出了路徑的起始座標。然後我用Z關閉路徑。在我的實現中，我知道是否按了那個點，然後控制路徑的開始和結束。（希望你明白，不知道如何解釋更好） – vale4674 2012-04-18 16:19:09

用控制點關閉SVG路徑（Z）？

回答

相關問題