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中使用路径的更多信息。