js drawing_javascript スキルを使用して接線を描画します

サンプル: http://www.zhaojz.com.cn/demo/draw9.html

コードをコピー コードは次のとおりです:

//接線を描画
//円の外側の点を指します
//点の円の中心
//r 半径
functiondrawCircleTangent(point, dot, r){
//補助線の描画開始
var color = 'DarkRed' //接線の色
; var color2 = "#ccc" //その他の補助線の色
; drawLine(dot, [dot[0] 9*r,dot[1]], {color: color2}); // 円の中心が位置する水平線を延長します
drawLine(dot, [dot[0],dot[1]-4*r], {color: color2}); // 円の中心に垂直な線を描きます
ドローポイント({
pw:2,ph:2,color:'DarkRed',point: [dot[0] 9*r,dot[1],'x']
});
ドローポイント({
pw:2,ph:2,color:'DarkRed',point: [dot[0],dot[1]-4*r,'y']
});
drawLine(point, [point[0],dot[1]], {color: color2}); // 点から x 軸に垂直線を描きます
DrawLine(point, dot, {color: color2}); // ポイントとドットを接続します
drawLine([point[0]-2*r, point[1]], [point[0] 2*r, point[1]], {color: color2});
//補助線の描画終了
//point.push('point');
ドローポイント({
pw:2,ph:2,color:'DarkRed',point:point
});
//dot.push('center');
var r_square = Math.pow(r,2) // r
の 2 乗; var point_v = point[1]-dot[1] //点から x 軸までの距離の 2 乗
; var point_h = point[0]-dot[0] //点から y 軸までの距離の 2 乗
var c_square = Math.pow(point_v,2) Math.pow(point_h,2) //点から円の中心までの距離の二乗
; var c = Math.sqrt(c_square) //点から円の中心までの距離
var sinA = Math.abs(point_v)/c; //sinA
var cosA = Math.abs(point_h)//cosA
; var b_square = c_square-r_square //点から接点までの距離の二乗
var b = Math.sqrt(b_square) //点から接点までの距離
var sinB = b/c; //sinB
var cosB = r/c
//円の中心を座標点として使用し、その点が位置する象限を決定します
var quadrant = 1 //デフォルト値
; var pm_h = point_h == 0? point_h: point_h/Math.abs(point_h); //水平方向
var pm_v = point_v == 0? point_v: point_v/Math.abs(point_v) //垂直方向
var hv = pm_h*pm_v; //乗算、-1 の場合、点は第 1 象限と第 3 象限にあり、1 の場合、点は第 2 象限と第 4 象限にあり、0 の場合、点は軸上にあります
スイッチ(hv){
ケース 1:
If((pm_h pm_v)==-2){
象限 = 2 //第 2 象限
}その他{
象限 = 4 //第 4 象限
}
休憩;
ケース-1:
If((pm_h-pm_v)==-2){
象限 = 3 //第 3 象限
}
休憩;
ケース 0:
If((pm_h pm_v)==-1){ //点が x 軸の負の半軸上または y 軸の正の半軸上にある場合、その点は第二象限
象限 = 2;
}
If((pm_h pm_v)==1){ //点が x 軸の正の半軸上または y 軸の負の半軸上にある場合、その点は 4 番目の軸にあると結論付けられます。象限
象限 = 4;
}
休憩;
デフォルト:
}
var sinC = 0;
    var conC = 0;
    sinD = 0 でした;
    var conD = 0;
    スイッチ(象限){
        ケース 1:
            sinC = cosB*cosA sinB*sinA; //sinC = sin(90 (B-A)) = cos(B-A) = cosB*cosA sinB*sinA
            withC = -(B なし *cosA-cosB*A なし); //cosC = cos(90 (B-A)) = -sin(B-A) = -(sinB*cosA-cosB*sinA)
            sinD = -(cosA*cosB-sinA*sinB); //sinD = sin(270-(A B))
            withD = -(A*cosB なし cosA*B なし); //conD = cos(270-(A B))
            休憩;
        ケース 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 = -(Aなし*cosB-cosA*Bなし); //conD = cos(90 (A-B))
            休憩;
        ケース 3:
            sinC = -(cosA*cosB sinA*sinB); //sinC = sin(-90 (A-B))
            withC = -(A なし *cosB-cosA *B なし); //conC = cos(-90 (A-B))
            sinD = (cosA*cosB-sinA*sinB); 
            conD = sinA*cosB cosA*sinB;
            休憩;
        ケース 4:
            sinC = cosA*cosB-sinA*sinB;
            withC = -(A*cosB なし cosA*B なし)
            sinD = -(cosA*cosB sinA*sinB); //sinD = sin(270 (A-B))
            withD = (A なし *cosB-cosA *B なし); //conD = cos(270 (A-B))
            休憩;
        デフォルト:
    }
    var TangentPointA = [point[0] b*conC, point[1] b*sinC]; //スーツ A の位置
    drawLine(point, tangentPointA, {color: color}); //画出切線
    drawLine(dot, tangentPointA, {color: color2}); //お会いできるのを楽しみにしています
    //drawArc(point, 17, (象限 ==1 ||象限 ==4?180:0)-(象限 ==2 ||象限 ==3?(-1):1)*Math.and(sinC )*180/Math.PI, 0);
    var TangentPointB = [point[0] b*conD, point[1] b*sinD]; //スーツケースB
    drawLine(point, tangentPointB, {color: color}); //画出切線
    drawLine(dot, tangentPointB, {color: color2}); //お会いできるのを楽しみにしています
    //drawArc(point, 27, (象限 ==1 ||象限 ==4?180:0)-(象限 ==2 ||象限 ==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
    });
    //画辅助弧
    //(象限 ==1 ||象限 ==4?360:0)
    drawArc(point, b, 60, (象限 ==1 ||象限==4?180:0)-(象限 ==2 ||象限==3?(-1):1)*Math.and(sinC )*180/Math.PI-5);
}