La relación entre el punto P (x, y) en un círculo con un radio r y el centro del círculo o (x0, y0): x = x0+rcosa; y = y0+rsina, a es el radian
Ejemplo: http://www.zhaojz.com.cn/demo/draw6.html
1. Círculo
La copia del código es la siguiente:
// círculo/elipse
// punto de punto
// r radio
// Relación de compresión vertical de compresión
function drawcircle (dot, r, compresionratio, data) {
var pstart = [dot [0]+r, dot [1]]; // Punto de inicio
var pre = PStart;
para (var i = 0; i <360; i+= 5) {
rad = i*math.pi/180; // Calcular radianes
//r*math.cos(rad) El desplazamiento horizontal del punto final del arco en relación con el punto
//r*math.sin(rad) desplazamiento vertical del punto final del arco en relación con el punto
// Relación de compresión vertical de compresión
var cur = [r*math.cos (rad)+dot [0], compresionratio*r*math.sin (rad)+dot [1]];
línea de dibujo (pre, cur);
pre = cur; // Guardar las coordenadas del punto actual
}
línea de dibujo (pre, pStart); // hacer cerrado
// dibujar puntos
punto de desplazamiento ({
PW: 2, ph: 2, color: 'Darkred', punto: punto
});
}
2. Arco
Solo dibuja parte del círculo, el algoritmo es similar al círculo
La copia del código es la siguiente:
// dibujar un arco
// punto de punto
// r radio
//ángulo
// ángulo de ángulofslope con el eje x
// Si aparece el pop
// etiqueta de título
function drawArc (dot, r, ángulo, AngleFslope, Pop, Title) {
var newDot = [dot [0], dot [1]];
var a = (AngleFslope+Angle/2)*Math.pi/180;
if (pop) {// Calcule las nuevas coordenadas del centro del círculo
newdot [0] = dot [0]+10*Math.cos (a);
newdot [1] = dot [1]+10*Math.sin (a);
}
if (! AngleFslope) {
AngleFslope = 0;
}
var aos = AngleFslope*Math.pi/180;
var aos2 = (AngleFslope+Angle)*Math.pi/180;
var pstart = [newDot [0]+r*math.cos (aos), newdot [1]+r*math.sin (aos)]; // El punto de partida del arco
var pend = [newdot [0]+r*math.cos (aos2), newdot [1]+r*math.sin (aos2)]; // El punto final del arco
var pre = PStart;
para (var i = 0; i <ángulo; i+= 2) {// dibuja un arco dentro del rango de ángulo
rad = (i+AngleFslope)*Math.pi/180;
var cur = [r*math.cos (rad)+newdot [0], r*math.sin (rad)+newdot [1]];
línea de dibujo (pre, cur);
pre = cur;
}
}
3. Forma del ventilador
Conecte los dos extremos del arco al centro del círculo
La copia del código es la siguiente:
//sector
// punto de punto
// r radio
//ángulo
// AnglefSlope El ángulo entre el eje X determina la dirección de la forma del sector
// Si aparece el pop, es decir, si se desvía del centro del círculo
// etiqueta de título
function DrawSector (Dot, R, Angle, AngleFslope, Pop, Title) {
var newDot = [dot [0], dot [1]];
var a = (AngleFslope+Angle/2)*Math.pi/180;
if (pop) {// Calcule las nuevas coordenadas del centro del círculo
newdot [0] = dot [0]+10*Math.cos (a);
newdot [1] = dot [1]+10*Math.sin (a);
}
if (! AngleFslope) {
AngleFslope = 0;
}
var aos = AngleFslope*Math.pi/180;
var aos2 = (AngleFslope+Angle)*Math.pi/180;
var pstart = [newDot [0]+r*math.cos (aos), newdot [1]+r*math.sin (aos)]; // El punto de partida del arco
var pend = [newdot [0]+r*math.cos (aos2), newdot [1]+r*math.sin (aos2)]; // El punto final del arco
línea de dibujo (NewDot, PStart); // Conecte el centro del círculo y el punto de partida
var pre = PStart;
para (var i = 0; i <ángulo; i+= 2) {// dibuja un arco dentro del rango de ángulo
rad = (i+AngleFslope)*Math.pi/180;
var cur = [r*math.cos (rad)+newdot [0], r*math.sin (rad)+newdot [1]];
línea de dibujo (pre, cur);
pre = cur;
}
DrawPolyline ([pre, pend, newDot]); // Hacer cerrado
// Dibuja el centro del círculo
punto de desplazamiento ({
PW: 2, ph: 2, color: 'Darkred', punto: punto
});
//Etiqueta
if (title) {
document.write ("<span style = 'altura: 24px; línea-height: 24px; ancho: 80px; text-align: centro; color: rojo; posición: absoluto; izquierda:"+(newdot [0]+r*(2/4)*math.cos (a) -40)+"Px; arriba: "+(newDot [1]+R*(2/4)*Math.sin (a) -12)+" '> "+Title+" </span> ");
}
}
¿No es impactante? Resulta que JS puede hacer cosas tan geniales. . .