Gunakan JS untuk menggambar garis singgung

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

Salinan kode adalah sebagai berikut:

// Gambar singgung

//titik

// pusat titik

// R radius

fungsi drawcircletangent (titik, dot, r) {

// Gambarlah garis-garis tambahan

var color = 'darkred'; // Warna garis singgung

var color2 = "#ccc"; // Warna garis tambahan lainnya

drawline (dot, [dot [0]+9*r, dot [1]], {color: color2}); // Perpanjang garis horizontal di mana pusat lingkaran berada

drawline (dot, [dot [0], dot [1] -4*r], {color: color2}); // Gambarlah garis vertikal di mana pusat lingkaran berada

drawpoint ({

PW: 2, ph: 2, warna: 'gelap', titik: [dot [0]+9*r, dot [1], 'x']

});

drawpoint ({

PW: 2, ph: 2, warna: 'gelap', titik: [dot [0], dot [1] -4*r, 'y']

});

drawline (titik, [titik [0], dot [1]], {color: color2}); // Gambarlah garis vertikal dari titik ke sumbu x

drawline (point, dot, {color: color2}); // hubungkan titik dan titik

drawline ([point [0] -2*r, point [1]], [point [0]+2*r, point [1]], {color: color2}); // Gambarlah garis horizontal di mana titiknya

// Gambarlah garis tambahan

//point.push('point ');

drawpoint ({

PW: 2, Ph: 2, Warna: 'Gelap', titik: titik

});

//dot.push('centre ');

var r_square = math.pow (r, 2); // kuadrat r

var point_v = point [1] -dot [1]; // kuadrat jarak dari titik ke sumbu x

var point_h = point [0] -dot [0]; // kuadrat jarak dari titik ke sumbu y

var c_square = math.pow (point_v, 2) + math.pow (point_h, 2); // kuadrat jarak dari titik ke tengah lingkaran

var c = math.sqrt (c_square); // Jarak dari titik ke tengah

var sina = math.abs (point_v)/c; // Sina

var cosa = math.abs (point_h)/c; // Cosa

var b_square = c_square-r_square; // kuadrat jarak dari titik ke garis singgung

var b = math.sqrt (b_square); // jarak dari titik ke garis singgung

var sinb = b/c; // sinb

var cosb = r/c; // cosb

// Tentukan kuadran di mana titik tersebut terletak dengan pusat lingkaran sebagai titik koordinat

var kuadran = 1; // nilai default

var pm_h = point_h == 0? point_h: point_h/math.abs (point_h); // arah horizontal

var pm_v = point_v == 0? point_v: point_v/math.abs (point_v); // arah vertikal

var hv = pm_h*pm_v; // Gandakan, ketika -1, titik berada di kuadran pertama dan ketiga, +1, titik berada di kuadran kedua dan keempat, dan ketika 0, titik ada pada sumbu

switch (hv) {

Kasus 1:

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

kuadran = 2; // kuadran kedua

}kalau tidak{

kuadran = 4; // kuadran keempat

}

merusak;

Kasus -1:

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

kuadran = 3; // kuadran ketiga

}

merusak;

Kasus 0:

if ((pm_h+pm_v) ==-1) {// Saat titik berada pada setengah sumbu negatif dari sumbu x atau sumbu setengah positif dari sumbu y, ditentukan titik itu di kuadran kedua

kuadran = 2;

}

if ((pm_h+pm_v) == 1) {// Ketika titik berada pada sumbu setengah positif dari sumbu x atau sumbu setengah negatif dari sumbu y, ditentukan titik itu berada di kuadran keempat

kuadran = 4;

}

merusak;

bawaan:

}

var sinc = 0;

var conc = 0;

var sind = 0;

var cond = 0;

sakelar (kuadran) {

Kasus 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))

merusak;

Kasus 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))

merusak;

Kasus 3:

SINC = -(COSA*COSB+SINA*SINB); // SINC = sin (-90+ (AB))

conc = -(Sina*cosb -cosa*sinb); // conc = cos (-90+ (AB))

sind = (cosa*cosb-sina*sinb);

cond = Sina*cosb+cosa*sinb;

merusak;

Kasus 4:

SINC = COSA*COSB-SINA*SINB;

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

sind = -(cosa*cosb+sina*sinb); // sind = sin (270+ (AB))

cond = (Sina*cosb-cosa*sinb); // cond = cos (270+ (AB))

merusak;

bawaan:

}

var tangentpointa = [titik [0]+b*conc, point [1]+b*sinc]; // Posisi titik garis singgung a

drawline (point, tangentpointa, {color: color}); // Gambar garis singgung

drawline (dot, tangentpointa, {color: color2}); // Sambungkan titik dan titik tangen

// drawarc (titik, 17, (kuadran == 1 || kuadran == 4? 180: 0)-(kuadran == 2 || kuadran == 3? (-1): 1)*Math.asin (SINC)*180/Math.pi, 0);

var tangentpointb = [titik [0]+b*cond, titik [1]+b*sind]; // Posisi titik garis singgung b

drawline (point, tangentpointb, {color: color}); // Gambar garis singgung

drawline (dot, tangentpointb, {color: color2}); // Sambungkan titik dan titik tangen

// drawarc (titik, 27, (kuadran == 1 || kuadran == 4? 180: 0)-(kuadran == 2 || kuadran == 3? (-1): 1)*Math.asin (Sind)*180/Math.pi, 0);

drawpoint ({// trag intinya

PW: 3, Ph: 3, Warna: 'Gelap', Titik: Tangentpointa

});

drawpoint ({// trag intinya

PW: 3, Ph: 3, Warna: 'Gelap', Titik: Tangentpointb

});

// Gambar busur tambahan

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

drawarc (titik, b, 60, (kuadran == 1 || kuadran == 4? 180: 0)-(kuadran == 2 || kuadran == 3? (-1): 1)*Math.asin (SINC)*180/Math.pi-5);

}