Curvas cuadráticas de Bézier

facebook-svg gplus-svg twitter-svg

Para dibujar una curva cuadrática de Bézier con <path> podemos utilizar una de estas instrucciones de control ( commands )

Q(absoluto) q(relativo) quadratic Bézier curve
Dibuja una curva cuadrática de Bézier desde el punto actual (x,y) hasta un punto (x2,y2); x1,y1 son las coordenadas del punto de anclaje (control point) P1.
Qx1,y1 x2,y2
T(absoluto) t(relativo) smooth quadratic Bézier curveto
Dibuja una curva cuadrática de Bézier desde el punto actual (x,y) hasta un punto (x1,y1). El punto de anclaje (control point) es el reflejo del punto de anclaje de la curva anterior.
Tx1,y1
Arcos y círculos en el canvas de HTML5

Repaso de Geometría

Tres puntos del plano: a, pc y z definen una curva cuadrática de Bézier. La curva empieza en el punto a, se dirige hacia pc ( punto de control ) y llega a z viniendo de la dirección del punto de control. Usualmente, no pasará por pc. Este punto sólo proporciona información direccional. La línea recta que une cada uno de los puntos finales de la curva ( a y z ) con su correspondiente punto de control ( pc ) es tangente a la curva.

See the Pen curva cuadrática de Bézier by Gabi (@enxaneta) on CodePen.

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

Un ejemplo fácil

Q es la instrucción de control que dibuja una curva cuadrática de Bézier desde el punto actual a (x,y) hasta un punto z (x2,y2), donde x1,y1 son las coordenadas del punto de anclaje ( control point ) pc.

<path d="Mx,y Qx1,y1 x2,y2" . . .

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 ( en mayusculas ):
Empezamos moviendo el lápiz en el punto x=50, y=30

<path d="M50,30 Q130,180 225,75"

Definimos un punto de control cuyas coordenadas son x=130, y=180

<path d="M50,30 Q130,180 225,75"

Dibujamos una curva cuadrática de Bézier desde el punto actual (x=50, y=30) hasta el punto cuyas coordenadas son x=225, y=75.

<path d="M50,30 Q130,180 225,75"

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

 <line x1="130" y1="180" x2="50" y2="30" stroke="#d9d9d9" stroke-width="1" />
<line x1="130" y1="180" x2="225" y2="75" stroke="#d9d9d9" stroke-width ="1"/>

y marcamos el punto de control:

<circle class="control-point" cx="130" cy="180" r="4" />

El segundo trazado ( la curva verde discontinua ) sigue el mismo recorrido que la primera, solo que esta vez utilizamos coordenadas relativas.
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 punto anterior es 50. El valor x del punto de control es 130 en "absoluto". El valor relativo del mismo es 130-50 = 80.
Veamos el código de las dos curvas uno al lado del otro.

<path d="M50,30 Q130,180 225,75"... ( absoluto )
<path d="m50,30 q80,150 175,45... ( relativo )


	
	
	
	
	

Policurvas
Smooth quadratic Bézier curveto

El SVG nos permite dibujar policurvas, o sea varias curvas conectadas suavemente entre si. En el caso de las curvas cuadráticas de Bézier, podemos utilizar el comando T ( smooth quadratic Bézier curveto ) que dibuja una curva cuadrática de Bézier desde el punto actual (x,y) hasta un punto x1,y1. El punto de anclaje ( control point ) es el reflejo del punto de anclaje de la curva anterior.

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 Q:

<path d="M20,80 Q100,230 195,125 Q290,20 360,150" style="stroke:yellow;...

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

<path d="M20,80 Q100,230 195,125 T360,150" style="stroke:#6ab150;...

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 T.