Heim > Web-Frontend > js-Tutorial > Zeichnen Sie Tangentenlinien mit js Zeichenkenntnissen in Javascript

Zeichnen Sie Tangentenlinien mit js Zeichenkenntnissen in Javascript

WBOY
Freigeben: 2016-05-16 16:20:44
Original
1408 Leute haben es durchsucht

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

Code kopieren Der Code lautet wie folgt:

//Tangente zeichnen
//zeige auf einen Punkt außerhalb des Kreises
//Punktkreismitte
//r Radius
Funktion drawCircleTangent(point, dot, r){
//Zeichne Hilfslinien-Start
var color = 'DarkRed'; //Farbe der Tangente
var color2 = "#ccc"; //Farbe anderer Hilfslinien
drawLine(dot, [dot[0] 9*r,dot[1]], {color: color2}); // Verlängert die horizontale Linie dort, wo sich der Mittelpunkt des Kreises befindet
drawLine(dot, [dot[0],dot[1]-4*r], {color: color2}); // Zeichne die vertikale Linie, an der sich der Mittelpunkt des Kreises befindet
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}); // Zeichne eine vertikale Linie vom Punkt zur x-Achse
DrawLine(point, dot, {color: color2}); // Punkt und Punkt verbinden
drawLine([point[0]-2*r, point[1]], [point[0] 2*r, point[1]], {color: color2}); //Zeichne die horizontale Linie, an der sich der Punkt befindet
//Hilfslinien-Ende zeichnen
//point.push('point');
drawPoint({
         pw:2,ph:2,color:'DarkRed',point: point
});
//dot.push('center');
var r_square = Math.pow(r,2); // Quadrat von r
var point_v = point[1]-dot[1]; //Das Quadrat des Abstands vom Punkt zur x-Achse
var point_h = point[0]-dot[0]; //Das Quadrat des Abstands vom Punkt zur y-Achse
var c_square = Math.pow(point_v,2) Math.pow(point_h,2); //Das Quadrat des Abstands vom Punkt zum Mittelpunkt des Kreises
var c = Math.sqrt(c_square); //Abstand vom Punkt zum Mittelpunkt des Kreises
var sinA = Math.abs(point_v)/c; //sinA
var cosA = Math.abs(point_h)/c; //cosA
var b_square = c_square-r_square; //Das Quadrat des Abstands vom Punkt zum Tangentenpunkt
var b = Math.sqrt(b_square); //Abstand vom Punkt zum Tangentenpunkt
var sinB = b/c; //sinB
var cosB = r/c; //cosB
//Bestimmen Sie den Quadranten, in dem sich der Punkt befindet, indem Sie den Mittelpunkt des Kreises als Koordinatenpunkt verwenden
var quadrant = 1; //Standardwert
var pm_h = point_h == 0? point_h: point_h/Math.abs(point_h); //Horizontale Richtung
var pm_v = point_v == 0? point_v: point_v/Math.abs(point_v); //Vertikale Richtung
var hv = pm_h*pm_v; // Multiplizieren, wenn -1, liegt der Punkt im ersten und dritten Quadranten, wenn 1, liegt der Punkt im zweiten und vierten Quadranten, und wenn 0, liegt der Punkt auf der Achse
switch(hv){
Fall 1:
If((pm_h pm_v)==-2){
                  quadrant = 2; //Der zweite Quadrant
               }sonst{
                 quadrant = 4; //Der vierte Quadrant
            }
             Pause;
Fall -1:
If((pm_h-pm_v)==-2){
                  quadrant = 3; //Der dritte Quadrant
            }
             Pause;
Fall 0:
If((pm_h pm_v)==-1){ //Wenn sich der Punkt auf der negativen Halbachse der x-Achse oder der positiven Halbachse der y-Achse befindet, wird daraus geschlossen, dass sich der Punkt in befindet zweiter Quadrant
               quadrant = 2;
            }
If((pm_h pm_v)==1){ //Wenn sich der Punkt auf der positiven Halbachse der x-Achse oder der negativen Halbachse der y-Achse befindet, wird daraus geschlossen, dass sich der Punkt auf der vierten befindet Quadrant
               Quadrant = 4;
            }
             Pause;
           Standard:
}
var sinC = 0;
    var conC = 0;
    war sinD = 0;
    var conD = 0;
    Schalter(Quadranten){
        Fall 1:
            sinC = cosB*cosA sinB*sinA; //sinC = sin(90 (B-A)) = cos(B-A) = cosB*cosA sinB*sinA
            withC = -(withoutB*cosA-cosB*withoutA); //cosC = cos(90 (B-A)) = -sin(B-A) = -(sinB*cosA-cosB*sinA)
            sinD = -(cosA*cosB-sinA*sinB); //sinD = sin(270-(A B))
            withD = -(withoutA*cosB cosA*withoutB); //conD = cos(270-(A B))
            Pause;
        Fall 2:
            sinC = -(cosB*cosA-sinB*sinA); //sinC = sin(-90 (A B))
            conC = sinA*cosB cosA*sinB; //conC = cos(-90 (A B))
            sinD = cosA*cosB sinA*sinB; //sinD = sin(90 (A-B))
            withD = -(withoutA*cosB-cosA*withoutB); //conD = cos(90 (A-B))
            Pause;
        Fall 3:
            sinC = -(cosA*cosB sinA*sinB); //sinC = sin(-90 (A-B))
            withC = -(withoutA*cosB-cosA*withoutB); //conC = cos(-90 (A-B))
            sinD = (cosA*cosB-sinA*sinB); 
            conD = sinA*cosB cosA*sinB;
            Pause;
        Fall 4:
            sinC = cosA*cosB-sinA*sinB;
            withC = -(withoutA*cosB cosA*withoutB)
            sinD = -(cosA*cosB sinA*sinB); //sinD = sin(270 (A-B))
            withD = (withoutA*cosB-cosA*withoutB); //conD = cos(270 (A-B))
            Pause;
        Standard:
    }
    var tangentPointA = [point[0] b*conC, point[1] b*sinC]; //Anzug A位置
    drawLine(point, tangentPointA, {color: color}); //画出切线
    drawLine(dot, tangentPointA, {color: color2}); //Ich freue mich auf Dich
    //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]; //KofferB
    drawLine(point, tangentPointB, {color: color}); //画出切线
    drawLine(dot, tangentPointB, {color: color2}); //Ich freue mich auf Dich
    //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,color:'DarkRed',point: tangentPointA
    });
    drawPoint({ //描切点
        pw:3,ph:3,color:'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);
}
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage