Zeichnen Sie Tangentenlinien mit js Zeichenkenntnissen in Javascript

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);
}