平滑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/