La relation entre le point P (x, y) sur un cercle avec un rayon r et le centre du cercle O (x0, y0): x = x0 + rcosa; y = y0 + rsina, a est le radian
Exemple: http://www.zhaojz.com.cn/demo/draw6.html
1. Cercle
La copie de code est la suivante:
// cercle / ellipse
// Dot Dot
// RADIUS R
// Ratio de compression verticale de compressionratio
Fonction DrawCircle (dot, r, compressionratio, data) {
var pstart = [dot [0] + r, dot [1]]; // point de départ
var pre = pStart;
pour (var i = 0; i <360; i + = 5) {
rad = i * math.pi / 180; // calculer les radians
//r*math.cos(rad) le décalage horizontal du point final de l'arc par rapport au point
//r*math.sin(rad) décalage vertical du point final de l'arc par rapport au point
// Ratio de compression verticale de compressionratio
var cur = [r * math.cos (rad) + dot [0], compressionratio * r * math.sin (rad) + dot [1]];
Drawline (pré, cur);
pre = cur; // enregistre les coordonnées du point actuel
}
Drawline (pré, pstart); // faire fermer
// dessiner des points
Dirtpoint ({
PW: 2, Ph: 2, Couleur: «Darkred», point: point
});
}
2. Arc
Dessinez simplement une partie du cercle, l'algorithme est similaire au cercle
La copie de code est la suivante:
// dessine un arc
// Dot Dot
// RADIUS R
//angle
// angle d'angle de l'ensemble avec l'axe x
// si pop apparaît
// Tag de titre
Fonction Drawarc (point, r, angle, angleofslope, pop, titre) {
var newdot = [dot [0], dot [1]];
var a = (angleofslope + angle / 2) * math.pi / 180;
if (pop) {// Calculez les nouvelles coordonnées du centre du cercle
newdot [0] = point [0] + 10 * math.cos (a);
newdot [1] = point [1] + 10 * math.sin (a);
}
if (! angleofslope) {
angleofslope = 0;
}
var aos = angleofslope * math.pi / 180;
var aos2 = (angleofslope + angle) * math.pi / 180;
var pstart = [newdot [0] + r * math.cos (aos), newdot [1] + r * math.sin (aos)]; // le point de départ de l'arc
var pennd = [newdot [0] + r * math.cos (aos2), newdot [1] + r * math.sin (aos2)]; // le point final de l'arc
var pre = pStart;
pour (var i = 0; i <angle; i + = 2) {// dessinez un arc dans la plage d'angle
rad = (i + angleofslope) * math.pi / 180;
var cur = [r * math.cos (rad) + newdot [0], r * math.sin (rad) + newdot [1]];
Drawline (pré, cur);
pre = cur;
}
}
3. Forme du ventilateur
Connectez les deux extrémités de l'arc au centre du cercle
La copie de code est la suivante:
//secteur
// Dot Dot
// RADIUS R
//angle
// angleofslope L'angle entre l'axe x détermine la direction de la forme du secteur
// si pop apparaît, c'est-à-dire si cela s'écarte du centre du cercle
// Tag de titre
Fonction Drawsector (point, r, angle, angle ofslope, pop, titre) {
var newdot = [dot [0], dot [1]];
var a = (angleofslope + angle / 2) * math.pi / 180;
if (pop) {// Calculez les nouvelles coordonnées du centre du cercle
newdot [0] = point [0] + 10 * math.cos (a);
newdot [1] = point [1] + 10 * math.sin (a);
}
if (! angleofslope) {
angleofslope = 0;
}
var aos = angleofslope * math.pi / 180;
var aos2 = (angleofslope + angle) * math.pi / 180;
var pstart = [newdot [0] + r * math.cos (aos), newdot [1] + r * math.sin (aos)]; // le point de départ de l'arc
var pennd = [newdot [0] + r * math.cos (aos2), newdot [1] + r * math.sin (aos2)]; // le point final de l'arc
Drawline (Newdot, Pstart); // Connectez le centre du cercle et le point de départ
var pre = pStart;
pour (var i = 0; i <angle; i + = 2) {// dessinez un arc dans la plage d'angle
rad = (i + angleofslope) * math.pi / 180;
var cur = [r * math.cos (rad) + newdot [0], r * math.sin (rad) + newdot [1]];
Drawline (pré, cur);
pre = cur;
}
DrawPolyline ([pré, Pend, newdot]); // Fermer
// dessine le centre du cercle
Dirtpoint ({
PW: 2, Ph: 2, Couleur: «Darkred», point: point
});
//Étiquette
if (title) {
Document.Write ("<Span Style = 'Height: 24px; Line-Height: 24px; largeur: 80px; Text-Align: Centre; Couleur: Red; Position: Absolute; Left:" + (newdot [0] + R * (2/4) * Math.cos (A) -40) + "PX; Top: "+ (newdot [1] + r * (2/4) * math.sin (a) -12) +" '> "+ title +" </span> ");
}
}
N'est-ce pas choquant? Il s'avère que JS peut faire des choses si cool. . .