Curvas cúbicas de Bézier

facebook-svg gplus-svg twitter-svg

Para dibujar curvas cúbicas de Bézier con <path> podemos utilizar estas instrucciones de controlcommands )

C (absoluto)
c (relativo)
curveto
Dibuja una curva cúbica de Bézier desde el punto actual ( x,y ) hasta un punto x3,y3.
x1,y1 x2,y2 son las coordenadas de los puntos de anclaje ( control points ) P1 y P2
Cx1,y1 x2,y2 x3,y3
S (absoluto)
s (relativo)
smooth curveto
Dibuja una curva cúbica de Bézier desde el punto actual (x,y) hasta un punto (x2,y2).
El primer punto de anclaje es el reflejo del segundo punto de anclaje de la curva anterior;
x1,y1 son las coordenadas del segundo punto de anclaje ( control point ) P1.
Sx1,y1 x2,y2
Arcos y círculos en el canvas de HTML5

Repaso de Geometría

Cuatro puntos del plano: P0, P1, P2 y P3 definen una curva cúbica de Bézier. La curva empieza en el punto P0, se dirige hacia P1 y llega a P3 viniendo de la dirección del punto P2. Usualmente, no pasará ni por P1 ni por P2. Estos puntos sólo están ahí para proporcionar información direccional.

See the Pen 53f7f0ff953dbb5799be66c887102663 by Gabi (@enxaneta) on CodePen.

Lea más sobre las curvas de Bézier en Wikipedia

Visite cubic-bezier.com ( Made by Lea Verou with care ). Verá un maravilloso ejemplo de curvas de Bézier, realizado con <canvas>.

Un primer ejemplo

C es la instrucción de control que dibuja una curva cúbica de Bézier desde el punto actual P0 ( x,y ) hasta un punto P3 ( x3,y3 ).
x1,y1 x2,y2 son las coordenadas de los puntos de anclaje ( control points ) P1 y P2
En el siguiente ejemplo vamos a dibujar dos curvas cuadráticas de Bézier.
Para el primer trazado ( la curva amarilla que se ve debajo de la verde discontinua ) utilizamos coordenadas absolutas. Recuerde que en este caso utilizamos instrucciones de control en mayúsculas.
Empezamos moviendo el lápiz en el punto x=70, y=150

<path d="M70,150 C10,40 240,40 180,150"

Definimos los puntos de control cuyas coordenadas son x1=10, y1=40 y x2=240, y2=40

<path d="M70,150 C10,40 240,40 180,150"

Dibujamos una curva cúbica de Bézier desde el punto actual ( x=70, y=150 ) hasta el punto cuyas coordenadas son x=180, y=150

<path d="M70,150 C10,40 240,40 180,150"

Para entender mejor cómo está construida la curva dibujamos las dos tangentes, desde los puntos de control hasta el origen de la curva, y hasta el final de la curva respectivamente:

<line x1="10" y1="40" x2="70" y2="150" stroke="#d9d9d9" stroke-width="1" />
<line x1="240" y1="40" x2="180" y2="150" stroke="#d9d9d9" stroke-width="1" />

y marcamos los puntos de control:

<circle class="control-point1" cx="10" cy="40" r="4" />
<circle class="control-point2" cx="240" cy="40" r="4" />

El segundo trazado ( la curva verde discontinua ) sigue el mismo recorrido que el primero, solo que esta vez utilizamos coordenadas relativas. Recuerde que en este caso utilizamos instrucciones de control en minúsculas.
Calcular las coordenadas relativas es fácil. Solo hay que restar del valor actual de x el valor anterior del x, y hacer lo mismo con el valor de y. Por ejemplo: el valor x del origen de la curva es 70 y el valor x del primer punto de control es 10 en "absoluto". El valor relativo del mismo es 10-70 = -60.
Veamos el código de las dos curvas uno al lado del otro.

<path d="M70,150 C10,40 240,40 180,150" ... ( absoluto )
<path d="m70,150 c-60,-110 170,-110 110,0" ... ( relativo )



	
	
	
	
	
	

Policurvas con smooth curveto

El SVG nos permite dibujar policurvas, o sea varias curvas conectadas suavemente entre si. En el caso de las curvas cúbicas de Bézier, podemos utilizar el comando S ( smooth curveto ) que dibuja una curva cúbica de Bézier desde el punto actual (x,y) hasta un punto x2,y2. El primer punto de anclaje es el reflejo del segundo punto de anclaje de la curva anterior; x1,y1 son las coordenadas del segundo punto de anclaje ( control point ) P1.

Veamos un ejemplo:
El primer trazado ( la curva amarilla que se ve debajo de la verde discontinua ) conecta dos curvas cuadráticas de Bézier, dibujadas utilizando el comando C:

<path d="M10,95 C25,15 105,10 125,95 C145,180 225,185 240,95"...

El segundo trazado, la curva verde discontinua, sigue el mismo recorrido que el primero, solo que esta vez utiliza el comando S ( smooth curveto ) para la segunda curva.

<path d="M10,95 C25,15 105,10 125,95 S225,185 240,95"...

Para que las cosas sean claras, también aparecen dibujadas las tangentes, los puntos de control y el punto de conexión entre las dos curvas. El punto azul representa el reflejo del punto de anclaje de la curva anterior calculado por S.