5

我有一组随机点，想用 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 曲线实现吗？如果没有，你能给我一个例子如何得到一个完全平滑的形状吗？

非常感谢，麦克法兰

4

2 回答 2

3

在您的第一个示例中，路径从 125,275 开始，然后在关闭之前再次位于 125,275。因为“Z”创建了另一个连接起点和终点的平滑路径段，所以你得到了那个小循环。如果在返回起点之前关闭它，您将获得所需的平滑形状，接触所有给定点。

这是示例路径的更正版本：

M125,275R 125,325 175,325 225,325 275,325 225,275 175,275Z
于 2012-08-31T08:16:35.947 回答
3

我自己修好了：

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

这是它的工作原理：

first：将行开始设置为第一个点，然后紧跟 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/

于 2012-02-03T10:45:42.317 回答