smooth svg path connection

Question

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

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?

Much thanks in advance, McFarlane

Jurat

Answer 1

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

Conchaconchie

I just gave you the accepted answer tag. This is the correct answer, mine is just a workaround. – Jurat

Answer 2

I fixed it myself:

Instead of using the catmull rom spline I am using quadratic curves and calculated midpoints. Note, that this solution will only work if you want to draw a smoothed shape but not if the path has to go directly through the points.

This is how it works:

first: set the line start to the first point followed immediately by a moveTo command

M point1.x,point1.y M 

this is important for closing the path without an edge.

now loop throug every point you have and add the calculated midpoint bewtween the current and next point followed by the quadratic curve with the next point as control:

mid.x,mid.y C next.x,next.y

you calculate the midpoint M between A and B using this:

M.x = (A.x-B.x)/2 + B.x
M.y = (A.y-B.y)/2 + B.y

after looping through all points you have to create a quadratic curve to the midpoint of the first and second point with the first one as control:

C first.x,first.y mid.x, mid.y

now close your path using Z so you can fill the shape:

Z

this connection is not visible because of the two moveTo commands at the beginning of the path.

to see the result and source code of my solution visit the updated jsfiddle: http://jsfiddle.net/ry8kT/1/

Jurat

Won't (Ax-Bx)/2 + Bx just be better as (Ax+Bx)/2 (which also correlates to the midpoint being the median/average) – Swafford