Verwenden Sie JS, um Tangenten zu zeichnen

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

Die Codekopie lautet wie folgt:

// Tangente zeichne

//Punkt

// Dot Center

// r Radius

Funktion Drawcircletangent (Punkt, Punkt, r) {

// Hilfslinien zeichnen

var color = 'darkred'; // die Farbe der Tangente

var color2 = "#ccc"; // die Farben anderer Hilfslinien

Drawline (dot, [dot [0]+9*r, dot [1]], {color: color2}); // Erweitern Sie die horizontale Linie, an der sich die Mitte des Kreises befindet

Dracline (dot, [dot [0], dot [1] -4*r], {color: color2}); // Zeichne die vertikale Linie, an der die Mitte des Kreises liegt

Drawpoint ({{

PW: 2, Ph: 2, Farbe: 'Darkred', Punkt: [DOT [0]+9*R, Punkt [1], 'x']

});

Drawpoint ({{

PW: 2, Ph: 2, Farbe: 'Darkred', Punkt: [Punkt [0], Punkt [1] -4*r, 'y']

});

Drawline (Punkt, [Punkt [0], Punkt [1]], {color: color2}); // Zeichne die vertikale Linie vom Punkt bis zur x-Achse

Drawline (Punkt, Punkt, {Farbe: color2}); // Punkt und Punkt verbinden

DRAGLINE ([Punkt [0] -2*r, Punkt [1]], [Punkt [0]+2*r, Punkt [1]], {color: color2}); // Zeichne die horizontale Linie, an der der Punkt ist

// Hilfslinien zeichnen

//point.push('point ');

Drawpoint ({{

PW: 2, Ph: 2, Farbe: 'Darkred', Punkt: Punkt

});

//dot.push('centre ');

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 von Punkt in die Mitte des Kreises

var c = math.sqrt (c_square); // Entfernung von Punkt zu Mitte

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 von Punkt zu Tangente

var b = math.sqrt (b_square); // der Abstand von Punkt zu Tangente

var sinb = b/c; // Sinb

var cosb = r/c; // cosb

// Bestimmen Sie den Quadranten, an dem sich der Punkt mit der Mitte des Kreises als Koordinatenpunkt befindet

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, Punkt im ersten und dritten Quadranten, +1, Punkt im zweiten und vierten Quadranten und wenn 0 auf der Achse liegt

Switch (hv) {

Fall 1:

if ((PM_H+PM_V) ==-2) {

Quadrant = 2; // der zweite Quadrant

}anders{

Quadrant = 4; // der vierte Quadrant

}

brechen;

Fall -1:

if ((pm_h-pm_v) ==-2) {

Quadrant = 3; // der dritte Quadrant

}

brechen;

Fall 0:

if ((PM_H+PM_V) ==-1) {// Wenn der Punkt auf der negativen Halbachse der x-Achse oder der positiven Halbachse der y-Achse liegt

Quadrant = 2;

}

if ((PM_H+PM_V) == 1) {// Wenn der Punkt auf der positiven Halbachse der x-Achse oder der negativen Halbachse der y-Achse liegt, wird festgestellt, dass der Punkt im vierten Quadranten liegt

Quadrant = 4;

}

brechen;

Standard:

}

var sinc = 0;

var conc = 0;

var Sind = 0;

var cond = 0;

Switch (Quadrant) {

Fall 1:

SINC = cosb*cosa+Sinb*Sina; // sinc = sin (90+ (ba)) = cos (ba) = cosb*cosa+Sinb*Sina

conc = -(Sinb*cosa -cosb*Sina); // cosc ​​= cos (90+ (ba)) = -sin (ba) = -(Sinb*cosa -cosb*Sina)

Sind = -(cosa*cosb -sina*Sinb); // Sind = sin (270- (a+b))

cond = -(Sina*cosb+cosa*Sinb); // cond = cos (270- (a+b))

brechen;

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+ (ab))

cond = -(Sina*cosb -cosa*Sinb); // cond = cos (90+ (ab)))

brechen;

Fall 3:

SINC = -(cosa*cosb+Sina*Sinb); // SINC = SIN (-90+ (AB))

conc = -(Sina*cosb -cosa*Sinb); // conc = cos (-90+ (ab)))

Sind = (cosa*cosb-ssina*Sinb);

cond = Sina*cosb+cosa*Sinb;

brechen;

Fall 4:

SINC = cosa*cosb-ssina*Sinb;

conc = -(Sina*cosb+cosa*Sinb)

Sind = -(cosa*cosb+Sina*Sinb); // Sind = sin (270+ (ab))

cond = (Sina*cosb-cosa*Sinb); // cond = cos (270+ (ab)))

brechen;

Standard:

}

var tangentpointa = [Punkt [0]+B*conc, Punkt [1]+B*SINC]; // Position des Tangentialpunkts a

Drawline (Punkt, Tangentpointa, {Farbe: Farbe}); // Zeichne die Tangentenlinie

Drawline (dot, Tangentpointa, {color: color2}); // Dots und Tangentenpunkte verbinden

// Drawarc (Punkt, 17, (Quadrant == 1 || Quadrant == 4? 180: 0)-(Quadrant == 2 || Quadrant == 3? (-1): 1)*Math.asin (Sinc)*180/math.pi, 0);

var tangentpointb = [Punkt [0]+b*cond, point [1]+b*Sind]; // Position des Tangentenpunkts B

Dractline (Punkt, TangentPointb, {Farbe: Farbe}); // Zeichne die Tangentenlinie

Dractline (dot, Tangentpointb, {color: color2}); // Dots und Tangentenpunkte verbinden

// Drawarc (Punkt, 27, (Quadrant == 1 || Quadrant == 4? 180: 0)-(Quadrant == 2 || Quadrant == 3? (-1): 1)*Math.asin (Sind)*180/math.pi, 0);

Drawpoint ({// trag den Punkt

PW: 3, Ph: 3, Farbe: 'Darkred', Punkt: Tangentpointa

});

Drawpoint ({// trag den Punkt

PW: 3, Ph: 3, Farbe: 'Darkred', Punkt: Tangentpointb

});

// Hilfsbogen zeichnen

// (quadrant == 1 || quadrant == 4? 360: 0)

DRAGARC (Punkt, B, 60, (Quadrant == 1 || Quadrant == 4? 180: 0)-(Quadrant == 2 || Quadrant == 3? (-1): 1)*Math.asin (Sinc)*180/Math.pi-5);

}