Maison > interface Web > js tutoriel > Dessinez des lignes tangentes en utilisant les compétences js drawings_javascript

Dessinez des lignes tangentes en utilisant les compétences js drawings_javascript

WBOY
Libérer: 2016-05-16 16:20:44
original
1408 Les gens l'ont consulté

Exemple : http://www.zhaojz.com.cn/demo/draw9.html

Copier le code Le code est le suivant :

//Trace une ligne tangente
//pointe un point à l'extérieur du cercle
//centre du cercle de points
//r rayon
fonction drawCircleTangent(point, point, r){
//Dessiner des lignes auxiliaires-début
var color = 'DarkRed'; //Couleur de la ligne tangente
var color2 = "#ccc"; //Couleur des autres lignes auxiliaires
drawLine(dot, [dot[0] 9*r,dot[1]], {color: color2}); // Prolonge la ligne horizontale où se trouve le centre du cercle
drawLine(dot, [dot[0],dot[1]-4*r], {color: color2}); // Trace la ligne verticale où se trouve le centre du cercle
drawPoint({
         pw:2,ph:2,color:'DarkRed',point: [dot[0] 9*r,dot[1],'x']
});
drawPoint({
         pw:2,ph:2,color:'DarkRed',point: [dot[0],dot[1]-4*r,'y']
});
drawLine(point, [point[0],dot[1]], {color: color2}); // Trace une ligne verticale du point à l'axe des x
DrawLine(point, dot, {color: color2}); // Connecter le point et le point
drawLine([point[0]-2*r, point[1]], [point[0] 2*r, point[1]], {color: color2}); //Dessine la ligne horizontale où se trouve le point
//Dessiner des lignes auxiliaires-fin
//point.push('point');
drawPoint({
         pw:2,ph:2,color:'DarkRed',point: point
});
//dot.push('centre');
var r_square = Math.pow(r,2); // carré de r
var point_v = point[1]-dot[1]; //Le carré de la distance du point à l'axe des x
var point_h = point[0]-dot[0]; //Le carré de la distance du point à l'axe y
var c_square = Math.pow(point_v,2) Math.pow(point_h,2); //Le carré de la distance du point au centre du cercle
var c = Math.sqrt(c_square); //Distance du point au centre du cercle
var sinA = Math.abs(point_v)/c; //sinA
var cosA = Math.abs(point_h)/c; //cosA
var b_square = c_square-r_square; //Le carré de la distance du point au point tangent
var b = Math.sqrt(b_square); //Distance du point au point tangent
var sinB = b/c; //sinB
var cosB = r/c; //cosB
//En utilisant le centre du cercle comme point de coordonnées, déterminez le quadrant où se trouve le point
var quadrant = 1; //Valeur par défaut
var pm_h = point_h == 0? point_h : point_h/Math.abs(point_h); //Direction horizontale
var pm_v = point_v == 0? point_v : point_v/Math.abs(point_v); //Direction verticale
var hv = pm_h*pm_v; //Multipliez, lorsque -1, le point est dans les premier et troisième quadrants, lorsque 1, le point est dans les deuxième et quatrième quadrants, et lorsque 0, le point est sur l'axe
interrupteur (hv){
cas 1 :
Si((pm_h pm_v)==-2){
                  quadrant = 2 ; //Le deuxième quadrant
               }autre{
                 quadrant = 4 ; //Le quatrième quadrant
            }
             pause ;
cas -1 :
Si((pm_h-pm_v)==-2){
                  quadrant = 3 ; //Le troisième quadrant
            }
             pause ;
cas 0 :
If((pm_h pm_v)==-1){ //Lorsque le point est sur le demi-axe négatif de l'axe des x ou sur le demi-axe positif de l'axe des y, on conclut que le point est dans le deuxième quadrant
               quadrant = 2 ;
            }
If((pm_h pm_v)==1){ //Lorsque le point est sur le demi-axe positif de l'axe des x ou sur le demi-axe négatif de l'axe des y, on conclut que le point est dans le quatrième quadrant
               quadrant = 4 ;
            }
             pause ;
           par défaut :
>
var sinC = 0;
    var conC = 0;
    était sinD = 0;
    var conD = 0;
    commutateur (quadrant){
        cas 1 :
            sinC = cosB*cosA sinB*sinA ; //sinC = sin(90 (B-A)) = cos(B-A) = cosB*cosA sinB*sinA
            avecC = -(sansB*cosA-cosB*sansA); //cosC = cos(90 (B-A)) = -sin(B-A) = -(sinB*cosA-cosB*sinA)
            sinD = -(cosA*cosB-sinA*sinB); //sinD = sin(270-(AB))
            avecD = -(sansA*cosB cosA*sansB); //conD = cos(270-(AB))
            pause;
        cas 2 :
            sinC = -(cosB*cosA-sinB*sinA); //sinC = sin(-90 (AB))
            conC = sinA*cosB cosA*sinB; //conC = cos(-90 (AB))
            sinD = cosA*cosB sinA*sinB; //sinD = sin(90 (AB))
            avecD = -(sansA*cosB-cosA*sansB); //conD = cos(90 (AB))
            pause;
        cas 3 :
            sinC = -(cosA*cosB sinA*sinB); //sinC = sin(-90 (AB))
            avecC = -(sansA*cosB-cosA*sansB); //conC = cos(-90 (AB))
            sinD = (cosA*cosB-sinA*sinB); 
            conD = sinA*cosB cosA*sinB;
            pause;
        cas 4 :
            sinC = cosA*cosB-sinA*sinB;
            avecC = -(sansA*cosB cosA*sansB)
            sinD = -(cosA*cosB sinA*sinB); //sinD = sin(270 (AB))
            avecD = (sansA*cosB-cosA*sansB); //conD = cos(270 (AB))
            pause;
        par défaut :
    >
    var tangentPointA = [point[0] b*conC, point[1] b*sinC]; //Costume A位置
    drawLine(point, tangentPointA, {couleur : couleur}); //画出切线
    drawLine(dot, tangentPointA, {color: color2}); //J'ai hâte de vous voir
    //drawArc(point, 17, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.and(sinC )*180/Math.PI, 0);
    var tangentPointB = [point[0] b*conD, point[1] b*sinD]; //ValiseB
    drawLine(point, tangentPointB, {couleur : couleur}); //画出切线
    drawLine(dot, tangentPointB, {color: color2}); //J'ai hâte de vous voir
    //drawArc(point, 27, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.and(sinD )*180/Math.PI, 0);
    drawPoint({ //描切点
        pw:3,ph:3,couleur:'DarkRed',point: tangentPointA
    });
    drawPoint({ //描切点
        pw:3,ph:3,couleur:'DarkRed',point: tangentPointB
    });
    //画辅助弧
    //(quadrant ==1 ||quadrant==4?360:0)
    drawArc(point, b, 60, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.and(sinC )*180/Math.PI-5);
>
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal