javascript - 平滑的 svg 路径连接

Question

我有一组随机点，想用 raphaeljs 创建一个平滑的 svg 形状。为了连接这些点，我使用了 catmull-rom-spline。问题是路径闭合的点不平滑。

这是我项目中的示例路径:

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

我还创建了一个 jsfiddle:http://jsfiddle.net/ry8kT/

这可以用 catmull 曲线实现吗？如果没有，能否请您举例说明如何获得完全平滑的形状？

非常感谢，麦克法兰

Answer 1

我自己修好了:

我没有使用 catmull rom 样条曲线，而是使用二次曲线和计算的中点。请注意，此解决方案仅在您想要绘制平滑形状时有效，但在路径必须直接通过这些点时无效。

它是这样工作的:

首先:将线开始设置为第一个点，紧接着是 moveTo 命令

M point1.x,point1.y M 

这对于闭合没有边的路径很重要。

现在循环遍历您拥有的每个点，并将计算出的中点添加到当前点和下一个点之间，然后是二次曲线，下一个点作为控制:

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/