Dibujar un sector circular
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 ).