平滑的svg路径连接



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

这是我的项目的一个示例路径:

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

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

这可以通过catmull曲线实现吗?如果没有,你能给我一个例子如何得到一个完全平滑的形状吗?

非常感谢,McFarlane

我自己修复了它:

我使用的不是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/

在第一个示例中,路径从125275开始,在关闭之前又是125275。因为"Z"创建了另一个连接起点和终点的平滑路径段,所以会得到一个小循环。如果你在返回起点之前关闭它,你会得到接触所有给定点的所需平滑形状。

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

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

相关内容

  • 没有找到相关文章

最新更新