平滑的svg路径连接 [英] smooth svg path connection

问题描述

我有一组随机点，并希望使用raphaeljs创建一个平滑的svg形状. 为了连接这些点，我正在使用catmull-rom-spline.问题在于路径的闭合点不平滑.

I have a random set of points and want to create a smooth svg shape with raphaeljs. To connect the points I am using a catmull-rom-spline. The problem is that the point where the path is closed is not smooth.

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

This is an example path out of my projcet:

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

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

I've also created a jsfiddle: http://jsfiddle.net/ry8kT/

这可以通过海鸥曲线来实现吗? 如果没有，请给我一个例子，说明如何获得完全平滑的形状吗?

Can this be achieved with catmull curves? If not, can you please give me an example how to get a completely smoothed shape?

非常感谢， 麦克法兰(McFarlane)

Much thanks in advance, McFarlane

推荐答案

在您的第一个示例中，路径从125,275开始并在关闭之前再次为125,275.因为"Z"会创建另一个连接起点和终点的平滑路径，所以您会得到一个小的循环.如果在返回起点之前将其关闭，则可以触摸所有给定点，从而获得所需的平滑形状.

In your first example, the path started at 125,275 and was at 125,275 again, before closing. Because 'Z' creates another smooth path segment connecting start and end point, you get that small loop. If you close it before returning to the startingpoint, you get the desired smooth shape touching all given points.

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

This is the corrected version of the example path:

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

这篇关于平滑的svg路径连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！