Raphael的文檔流程圖

Question

我知道如何在拉斐爾繪製一個簡單的矩形，並且我理解其所有參數的含義。例如，這些參數提供一個很好的矩形，寬度爲201和高度爲179

M0,0 L0,179 L210,179 L210,0 L0,0Z 

但我不希望有一個簡單的矩形，我希望文檔流程應該是這樣的

我從here知道的是，在我聖拉斐爾可以繪製曲線，例如用這些參數：

M150,150 A100,70 0 0,0 250,220 

但不幸的是，這本書沒有解釋這些參數的含義。我知道M是什麼意思，但我不知道A的意思和所有下面的座標。

那麼，我該如何修復我的初始矩形座標以獲得文檔流程圖？

Answer 1

這裏您缺少的作品是SVG Path Spec。

您最初的矩形：

M0,0 L0,179 L210,179 L210,0 L0,0Z 

...讀作「去0,0，然後再接0179，然後再接210179，然後再接210,0 ，然後畫出一條直線到0,0並返回到起點。「 （最後一部分，Z有點多餘，因爲我們已經關閉了路徑。）

您想用圓弧替換第二行 - 從0,179到210,179 - 。我不是設計師，但我spitball，也許一個Quadratic Bezier Curve會做的伎倆：

M0,0 L0,179 Q53,159 105,179 T210,179 L210,0 L0,0Z 

這意味着，起始於Q，「從起點[0179]至105179繪製二次貝塞爾曲線使用53,159作爲控制點，然後使用最後一個控制點的反射，從105,179到210,179再畫一個。「我沒有測試過這個路徑，所以你可能需要調整控制點來獲得你想要的曲線。 （增加控制點與179之間的距離會使曲線更具戲劇性;減小曲線會使曲線更平緩。）

Raphael documentation解釋了關於在Raphael中使用路徑的更多信息。