smooth svg path connection

Question

Tengo un conjunto de puntos al azar y quiero crear una forma de svg suave con raphaeljs. Para conectar los puntos, estoy usando catmull-rom-spline. El problema es que el punto donde la ruta está cerrada no es uniforme.

Ésta es una ruta de ejemplo de mi projcet:

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

También he creado un jsFiddle: http://jsfiddle.net/ry8kT/

se puede lograr esto con curvas Catmull? Si no es así, ¿podría darme un ejemplo de cómo obtener una forma completamente alisada?

Muchas gracias por adelantado, McFarlane

Answer 1

En el primer ejemplo, el camino comenzó a las 125.275 y 125.275 se encontraba en otra vez, antes de cerrar. Debido a que 'Z' crea otro segmento de ruta suave que conecta el punto inicial y final, obtienes ese pequeño bucle. Si lo cierra antes de regresar al punto de partida, obtendrá la forma suave deseada tocando todos los puntos dados.

Esta es la versión corregida de la ruta de ejemplo:

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

Answer 2

me fijo yo mismo:

En lugar de utilizar la spline de Catmull rom estoy usando curvas cuadráticas y puntos medios calculados. Tenga en cuenta que esta solución solo funcionará si desea dibujar una forma suavizada pero no si la ruta debe pasar directamente por los puntos.

Así es como funciona:

primera: establecer la línea de salida hasta el primer punto seguido inmediatamente por un comando moveTo

M point1.x,point1.y M 

esto es importante para el cierre de la ruta sin un borde.

ahora bucle throug todos los puntos que tiene y añadir el punto medio calculado bewtween el punto actual y el siguiente, seguido de la curva cuadrática con el siguiente punto como control:

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

se calcula el punto medio M entre A y B el uso de este:

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

después de bucle a través de todos los puntos que hay que crear una curva cuadrática al punto medio de la primera y segunda puntos con el primero como el control:

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

Ahora cierra ruta utilizando Z para que pueda llenar la forma:

Z 

esta conexión no es visible debido a los dos comandos moveTo al comienzo de la ruta.

para ver el código de resultado y la fuente de mi solución visitar el jsFiddle actualización: http://jsfiddle.net/ry8kT/1/