⇪

Dibujar un sector circular

facebook-svg gplus-svg twitter-svg

Para dibujar un sector circular podemos utilizar <path> y el comando arco elíptico ( elliptical Arc ) A o a .

Repaso de geometría

Calcular las coordenadas de un punto en la circunferencia

Para calcular las coordenadas de un punto ( xp,yp ) en la circunferencia de una elipse utilizamos las siguientes fórmulas:
var xp = cx + rx * Math.cos(a);
var yp = cy + ry * Math.sin(a);
Donde cx y cy son las coordenadas del centro de la elipse;
rx, ry son los radios de la elipse: el radio horizontal ( rx ) y el radio vertical ( ry )
a es el ángulo ( en radianes si trabajamos en JavaScript ) entre el origen del trazado y este punto.

Como convertir grados sexagesimales a radianes

Un circulo completo tiene 2π radianes, con lo cual podemos escribir: 360° = 2π rad;
o si hablamos JavaScript: 360° = 2*Math.PI;
Para convertir grados sexagesimales a radianes utilizamos la siguiente fórmula:
radianes = (π / 180) * grados;
En JavaScript podemos escribir:
var radianes = (Math.PI / 180) * grados;

Dibujar un sector circular

Para dibujar un sector circular tenemos que escribir dos funciones en el JavaScript:
1. la función dGajo() que calcula el parámetro d de <path>.
2. la función nuevoGajo() que dibuja un nuevo "gajo" en el lienzo SVG.

La función dGajo()

Toma 2 argumentos:
- el ángulo ( en grados sexagesimales ) donde empieza el "gajo": ap
- el ángulo ( en grados sexagesimales ) donde acaba el "gajo": af

Transforma los ángulos ap y af a radianes y calcula las coordenadas Xap, Yap, Xaf e Yaf de los puntos donde empieza ( ap ) y donde acaba ( af ) el "gajo" :

var Xap = cx+r * Math.cos ( (Math.PI / 180) * ap);
var Yap = cy+r * Math.sin ( (Math.PI / 180) * ap);

var Xaf = cx+r * Math.cos ( (Math.PI / 180) * af);
var Yaf = cy+r * Math.sin ( (Math.PI / 180) * af);

 

Define las instrucciones para dibujar el "gajo":
- mueve el lápiz en el centro del círculo

"M" + cx + ", " + cy

- dibuja una línea hasta el punto ap

" L"+Xap+","+Yap

- dibuja un arco circular desde ap hasta af. ( sweep-flag = 1 )

" A"+r+","+r+" 0 0, 1 "+" "+Xaf+","+Yaf

-cierra el trazado

" z";

Devuelve el parametro_d con las instrucciones para dibujar el "gajo"

return parametro_d;


function dGajo(ap,af){
	   
       var Xap = cx+r * Math.cos((Math.PI / 180) * ap);
       var Yap = cy+r * Math.sin((Math.PI / 180) * ap);
				
       var Xaf = cx+r * Math.cos((Math.PI / 180) * af);
       var Yaf = cy+r * Math.sin((Math.PI / 180) * af);
				
       var parametro_d = 
                   "M" + cx + ", " + cy+
                   " L"+Xap+","+Yap+ 
                   " A"+r+","+r+" 0 0, 1 "+" "+Xaf+","+Yaf+ 
                   " z";
       return parametro_d;
	 }

La función nuevoGajo()

Toma los mismos argumentos que dGajo():
- el ángulo ( en grados sexagesimales ) donde empieza el "gajo": ap
- el ángulo ( en grados sexagesimales ) donde acaba el "gajo": af

Crea un nuevo elemento <path> utilizando el método createElementNS()

var nuevoGajo = document.createElementNS("http://www.w3.org/2000/svg","path");

Establece el valor del atributo d igual al valor calculado con dGajo(). Para esto utiliza el método setAttributeNS.

nuevoGajo.setAttributeNS(null,"d", dGajo(ap,af));

También establece el color de relleno del trazado

nuevoGajo.setAttributeNS(null,"fill", color);

Finalmente inserta el nuevoGajo en el lienzo SVG utilizando el método appendChild().

var lienzoSVG = document.getElementById("lienzoSVG");
. . . . .
lienzoSVG.appendChild(nuevoGajo);

function nuevoGajo(ap,af){

var nuevoGajo=document.createElementNS("http:\/\/www.w3.org/2000/svg","path");
nuevoGajo.setAttributeNS(null,"d", dGajo(ap,af));
nuevoGajo.setAttributeNS(null,"fill", "#6ab150"); 
lienzoSVG.appendChild(nuevoGajo);
}

Veamos como queda:

Declaramos las variables necesarias:
- el contenedor <svg> donde dibujar el trazado: var lienzoSVG = document.getElementById("lienzoSVG");
- las coordenadas del centro del círculo: var cx = 125,cy = 100;
- el radio del mismo: var r = 80;
- el ángulo de partida en grados sexagesimales: var ap = -20;
- el ángulo final en grados sexagesimales: var af = 30;
Declaramos también las dos funciones dGajo() y nuevoGajo() y llamamos la función nuevoGajo() para construir un nuevo sector circular.

<svg id = "lienzoSVG" height="200" width="250"></svg>


var lienzoSVG = document.getElementById("lienzoSVG");
var cx = 125,cy = 100;
var r = 80;
var ap = -20;// grados sexagesimales
var af = 30;// grados sexagesimales

function dGajo(ap,af){
       var Xap = cx+r * Math.cos((Math.PI / 180) * ap);
       var Yap = cy+r * Math.sin((Math.PI / 180) * ap);
				
       var Xaf = cx+r * Math.cos((Math.PI / 180) * af);
       var Yaf = cy+r * Math.sin((Math.PI / 180) * af);
				
       var parametro_d = 
                   "M" + cx + ", " + cy+
                   " L"+Xap+","+Yap+ 
                   " A"+r+","+r+" 0 0, 1 "+" "+Xaf+","+Yaf+ 
                   " z";
       return parametro_d;
	 }

function nuevoGajo(ap,af){
var nuevoGajo=document.createElementNS("http:\/\/www.w3.org/2000/svg","path");
nuevoGajo.setAttributeNS(null,"d", dGajo(ap,af));
nuevoGajo.setAttributeNS(null,"fill",  "#6ab150"); 
lienzoSVG.appendChild(nuevoGajo);
} 
// llama la función nuevoGajo
nuevoGajo(ap,af);

No te olvides: siempre que sea posible, pon el JavaScript dentro del <body>, justo antes de su cierre: los estilos arriba, los scripts al fondo.

Saber como dibujar sectores circulares puede ser muy útil si queremos dibujar un grafico circular ( pie chart ).