Ejemplo: http://www.zhaojz.com.cn/demo/draw9.html
La copia del código es la siguiente:
// dibujar tangente
//punto
// Centro de puntos
// r radio
function drawCircletangent (Point, Dot, R) {
// dibujar líneas auxiliares-inicio
var color = 'oscuro'; // El color de la tangente
var color2 = "#ccc"; // Los colores de otras líneas auxiliares
Drawline (dot, [dot [0]+9*r, dot [1]], {color: color2}); // extiende la línea horizontal donde está el centro del círculo
Drawline (dot, [dot [0], dot [1] -4*r], {color: color2}); // Dibuja la línea vertical donde está el centro del círculo
punto de desplazamiento ({
PW: 2, pH: 2, color: 'Darkred', punto: [Dot [0]+9*r, Dot [1], 'x']
});
punto de desplazamiento ({
PW: 2, pH: 2, color: 'oscuro', punto: [dot [0], dot [1] -4*r, 'y']]
});
línea de dibujo (punto, [punto [0], dot [1]], {color: color2}); // Dibuja la línea vertical desde el punto al eje X
línea de dibujo (punto, punto, {color: color2}); // Conectar punto y punto
Drawline ([punto [0] -2*r, punto [1]], [punto [0]+2*r, punto [1]], {color: color2}); // Dibuja la línea horizontal donde está el punto
// dibujar al final de las líneas auxiliares
//point.push('Point ');
punto de desplazamiento ({
PW: 2, ph: 2, color: 'oscuro', punto: punto
});
//dot.push('centre ');
var r_square = math.pow (r, 2); // cuadrado de r
var punto_v = punto [1] -dot [1]; // El cuadrado de la distancia desde el punto al eje X
var punto_h = punto [0] -dot [0]; // El cuadrado de la distancia desde el punto al eje Y
var c_square = Math.Pow (Point_v, 2) + Math.Pow (Point_h, 2); // El cuadrado de la distancia desde el punto al centro del círculo
var c = math.sqrt (c_square); // Distancia de punto a otro
var sina = Math.abs (Point_v)/c; // Sina
var cosa = math.abs (point_h)/c; // COSA
var b_square = c_square-r_square; // El cuadrado de la distancia desde el punto hasta la tangente
var b = math.sqrt (b_square); // La distancia de punto a tangente
var sinb = b/c; // sinb
var cosb = r/c; // Cosb
// Determinar el cuadrante donde el punto se encuentra con el centro del círculo como punto de coordenada
cuadrante var = 1; // valor predeterminado
var pm_h = point_h == 0? Point_h: Point_h/Math.abs (Point_h); // dirección horizontal
var PM_V = Point_V == 0? Point_V: Point_V/Math.abs (Point_V); // dirección vertical
var hv = pm_h*pm_v; // multiplicar, cuando -1, el punto está en el primer y tercer cuadrante, +1, el punto está en el segundo y cuarto cuadrantes, y cuando 0, el punto está en el eje
Switch (HV) {
Caso 1:
if ((pm_h+pm_v) ==-2) {
cuadrante = 2; // El segundo cuadrante
}demás{
cuadrante = 4; // El cuarto cuadrante
}
romper;
Caso -1:
if ((pm_h-pm_v) ==-2) {
cuadrante = 3; // El tercer cuadrante
}
romper;
Caso 0:
if ((pm_h+pm_v) ==-1) {// Cuando el punto está en el medio eje negativo del eje x o el medio eje positivo del eje y, se determina que el punto está en el segundo cuadrante
cuadrante = 2;
}
if ((pm_h+pm_v) == 1) {// Cuando el punto está en el medio eje positivo del eje x o el medio eje negativo del eje y, se determina que el punto está en el cuarto cuadrante
cuadrante = 4;
}
romper;
por defecto:
}
var sinc = 0;
var cable = 0;
var sind = 0;
var cond = 0;
Switch (cuadrante) {
Caso 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))
romper;
Caso 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 -cua*sinb); // cond = cos (90+ (AB))
romper;
Caso 3:
sinc = -(cosa*cosb+sina*sinb); // sinc = sin (-90+ (ab))
conc = -(sina*cosb -cua*sinb); // conc = cos (-90+ (ab))
sind = (COSA*COSB-SINA*SINB);
cond = sina*cosb+cosa*sinb;
romper;
Caso 4:
sinc = COSA*COSB-SINA*SINB;
Conc = -(Sina*Cosb+Cosa*Sinb)
sind = -(COSA*COSB+SINA*SINB); // sind = sin (270+ (ab))
cond = (sina*cosb-cua*sinb); // cond = cos (270+ (AB))
romper;
por defecto:
}
var tangentPoPya = [punto [0]+b*conc, punto [1]+b*sinc]; // Posición del punto tangente A
Drawline (punto, TangentPeta, {color: color}); // Dibuja la línea tangente
línea de dibujo (DOT, TangentPoPya, {color: color2}); // conectar puntos y puntos tangentes
// drawArc (punto, 17, (cuadrante == 1 || cuadrante == 4? 180: 0)-(cuadrante == 2 || cuadrant == 3? (-1): 1)*math.asin (sinc)*180/math.pi, 0);
var tangentPointB = [punto [0]+b*cond, punto [1]+b*sind]; // Posición del punto tangente B
línea de dibujo (punto, tangentPointB, {color: color}); // Dibuja la línea tangente
línea de dibujo (dot, tangentPointB, {color: color2}); // conectar puntos y puntos tangentes
// drawArc (punto, 27, (cuadrante == 1 || cuadrante == 4? 180: 0)-(cuadrante == 2 || cuadrant == 3? (-1): 1)*math.asin (sind)*180/math.pi, 0);
RayaPoint ({// Atrapan el punto
PW: 3, ph: 3, color: 'Darkred', Point: Tangentpointsa
});
RayaPoint ({// Atrapan el punto
PW: 3, ph: 3, color: 'Darkred', punto: TangentPointB
});
// dibujar arco auxiliar
// (cuadrante == 1 || cuadrante == 4? 360: 0)
drawArc (punto, b, 60, (cuadrante == 1 || cuadrante == 4? 180: 0)-(cuadrante == 2 || cuadrante == 3? (-1): 1)*math.asin (sinc)*180/math.pi-5);
}