Arcos elipticos

facebook-svg gplus-svg twitter-svg

Podemos dibujar arcos elípticos con <path> utilizando A o a ( elliptical Arc ) como instrucciones de control ( commands ). Como siempre la instrucción en mayúscula ( A ) utiliza coordenadas absolutas, mientras que la instrucción en minuscula ( a ) utiliza coordenadas relativas.

Miremos detenidamente la sintaxis de estas instrucciones de control.

Arx,ry  x-axis-rotationlarge-arc-flag sweep-flag x,y

A o a instrucción de control para dibujar un arco eliptico.
rx, ry son los radios de la elipse: el radio horizontal ( rx ) y el radio ( ry ).
Huelga decir que si rx == ry obtenemos un arco de circulo.
x-axis-rotation representa el ángulo de rotación del eje horizontal ( x ).
large-arc-flag es un parámetro que determina que parte de la curva será dibujada.
Puede tomar solo dos valores: 1 – para la parte grande de la curva y 0 para la parte pequeña.
sweep-flag controla la dirección del "lapiz" al dibujar el arco.
También puede tomar solo dos valores: 1 – en el sentido del reloj y 0 – en el sentido contrario.
x,y son las coordenadas del punto donde acaba el arco elíptico.

Dibujar un arco eliptico

Para dibujar el siguiente arco elíptico primero movemos el lápiz hasta el punto x=50,y=110 ( M50,150 ), y después trazamos el arco siguiendo la sintaxis que ya hemos visto:

<path d= "M 50,150 a110,80 40 1,1 170,0"

Los dos radios del arco elíptico son: rx = 110, ry= 80:

<path d= "M 50,150 a110,80 40 1,1 170,0"

El ángulo de rotación del eje horizontal:  x-axis-rotation = 40º: a110,80 40 1,1 170,0
La parte grande de la curva large-arc-flag = 1 ( sí: la parte grande ): a110,80 40 1,1 170,0
Dibujado hacia la derecha sweep-flag = 1 ( sí: en el sentido del reloj ): a110,80 40 1,1 170,0
El arco acaba en el punto x += 170, y+=0 ( relativo al punto anterior ): a110,80 40 1,1 170,0

El pequeño circulo <circle class="origen" marca el punto donde empezamos a dibujar.






Dibujar una elipse

Para dibujar una elipse hay que trazar un arco elíptico que acaba casi en el mismo punto donde empieza
( a100,70 0 1, 0 0,-1 z ) y lo cerramos con closepath ( a100,70 0 1, 0 0,-1 z ). Es importante que escojamos la parte grande de la curva: large-arc-flag = 1 ( a100,70 0 1, 0 0,-1 z ).

El pequeño circulo <circle class="origen" marca el punto donde empezamos a dibujar.






x-axis-rotation ( el ángulo de rotación del eje horizontal )

El valor del parámetro x-axis-rotation determina el ángulo de rotación del eje horizontal del arco, en comparación con el plano horizontal.
En el siguiente ejemplo el ángulo de rotación del eje horizontal es de 30°.

a100,70 30 1, 1 0,-1






Para entender mejor como funciona la rotación del eje horizontal miremos el siguiente ejemplo, donde lo único que cambia es el ángulo de rotación.
Cada curva visible en el siguiente ejemplo representa de hecho 2 curvas distintas, ya que después de 180º el trazado vuelve sobre sus pasos.

















large-arc-flag

En el primer ejemplo ( <svg id="laf1" ) el parámetro large-arc-flag del arco azul es 1 ( dibuja la parte grande del arco ). En el segundo SVG ( <svg id="laf2") el parámetro large-arc-flag del arco azul es 0 ( dibuja la parte pequeña del arco ).

a50,40 0 1,0 90,0" ( dibuja la parte grande del arco )
a50,40 0 0,0 90,0"( dibuja la parte pequeña del arco )











sweep-flag

En el primer ejemplo ( <svg id="swf1" ) el parámetro sweep-flag del arco azul es 1 ( dibuja el arco en el sentido del reloj ). En el segundo SVG ( <svg id="swf2") el parámetro sweep-flag del arco azul es 0 ( dibuja el arco en sentido contrario ).
El pequeño circulo <circle class="origen" marca el punto donde empezamos a dibujar.

a50,40 0 1,0 90,0" ( dibuja el arco en sentido contrario )
a50,40 0 1,1 90,0"( dibuja el arco en el sentido del reloj )