js Drawing_javascript 기술을 사용하여 접선 그리기

샘플: http://www.zhaojz.com.cn/demo/draw9.html

코드 복사 코드는 다음과 같습니다.

//접선 그리기
//원 밖의 점을 가리킵니다
//점원 중심
//r 반경
함수 drawCircleTangent(점, 점, 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}) // 원의 중심이 위치한 곳에 수직선을 그립니다.
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}); // 점에서 x축까지 수직선을 그립니다.
DrawLine(point, dot, {color: color2}); // 점과 점 연결
drawLine([point[0]-2*r, point[1]], [point[0] 2*r, point[1]], {color: color2}) //점이 위치한 곳에 수평선을 그립니다.
//보조선 그리기-끝
//point.push('포인트');
drawPoint({
         pw:2,ph:2,color:'DarkRed',point: point
});
//dot.push('center');
var r_square = Math.pow(r,2); // r의 제곱
var point_v = point[1]-dot[1]; //점에서 x축까지의 거리의 제곱
var point_h = point[0]-dot[0]; //점에서 y축까지의 거리의 제곱
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)/c; //cosA
var b_square = c_square-r_square; //점에서 접점까지의 거리의 제곱
var b = Math.sqrt(b_square); //점에서 접점까지의 거리
var sinB = b/c; //sinB
var cosB = r/c; //cosB
//원의 중심을 좌표점으로 삼아 점이 위치한 사분면을 구한다
var 사분면 = 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 //두 번째 사분면
               }그밖에{
                사분면 = 4 //제4사분면
            }
             휴식;
사례 -1:
If((pm_h-pm_v)==-2){
                  사분면 = 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-(AB))
            withD = -(A*cosB 없음 cosA*B 없음); //conD = cos(270-(AB))
            휴식;
        사례 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 = [포인트[0] b*conC, 포인트[1] b*sinC]; //Suit A位置
    drawLine(point, tangentPointA, {color: color}); //출시切线
    drawLine(dot, tangentPointA, {color: color2}); //피해를 끼쳐드려 죄송합니다
    //drawArc(점, 17, (사분면 ==1 ||사분면==4?180:0)-(사분면 ==2 ||사분면==3?(-1):1)*Math.and(sinC )*180/Math.PI, 0);
    var tangentPointB = [포인트[0] b*conD, 포인트[1] b*sinD]; //여행가방B
    drawLine(point, tangentPointB, {color: color}); //출시切线
    drawLine(dot, tangentPointB, {color: color2}); //기대하겠습니다
    //drawArc(점, 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);
}