Home > Web Front-end > JS Tutorial > Draw tangent lines using js drawing_javascript skills

Draw tangent lines using js drawing_javascript skills

WBOY
Release: 2016-05-16 16:20:44
Original
1408 people have browsed it

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

Copy code The code is as follows:

//Draw tangent line
//point a point outside the circle
//dot circle center
//r radius
function drawCircleTangent(point, dot, r){
//Draw auxiliary lines-start
var color = 'DarkRed'; //Color of tangent line
var color2 = "#ccc"; //Color of other auxiliary lines
drawLine(dot, [dot[0] 9*r,dot[1]], {color: color2}); // Extend the horizontal line where the center of the circle is located
drawLine(dot, [dot[0],dot[1]-4*r], {color: color2}); // Draw the vertical line where the center of the circle is located
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}); // Draw a vertical line from point to x-axis
DrawLine(point, dot, {color: color2}); // Connect point and dot
drawLine([point[0]-2*r, point[1]], [point[0] 2*r, point[1]], {color: color2}); //Draw the horizontal line where point is located
//Draw auxiliary lines-end
//point.push('point');
drawPoint({
         pw:2,ph:2,color:'DarkRed',point: point
});
//dot.push('centre');
var r_square = Math.pow(r,2); // square of r
var point_v = point[1]-dot[1]; //The square of the distance from point to the x-axis
var point_h = point[0]-dot[0]; //The square of the distance from point to y-axis
var c_square = Math.pow(point_v,2) Math.pow(point_h,2); //The square of the distance from point to the center of the circle
var c = Math.sqrt(c_square); //Distance from point to center of circle
var sinA = Math.abs(point_v)/c; //sinA
var cosA = Math.abs(point_h)/c; //cosA
var b_square = c_square-r_square; //The square of the distance from point to tangent point
var b = Math.sqrt(b_square); //Distance from point to tangent point
var sinB = b/c; //sinB
var cosB = r/c; //cosB
//Using the center of the circle as the coordinate point, determine the quadrant where the point is located
var quadrant = 1; //Default value
var pm_h = point_h == 0? point_h: point_h/Math.abs(point_h); //Horizontal direction
var pm_v = point_v == 0? point_v: point_v/Math.abs(point_v); //Vertical direction
var hv = pm_h*pm_v; //Multiply, when -1, the point is in the first and third quadrants, when 1, the point is in the second and fourth quadrants, and when 0, the point is on the axis
switch(hv){
case 1:
If((pm_h pm_v)==-2){
                  quadrant = 2; //The second quadrant
               }else{
                 quadrant = 4; //The fourth quadrant
            }
             break;
case -1:
If((pm_h-pm_v)==-2){
                  quadrant = 3; //The third quadrant
            }
             break;
case 0:
If((pm_h pm_v)==-1){ //When the point is on the negative half-axis of the x-axis or the positive half-axis of the y-axis, it is concluded that the point is in the second quadrant
               quadrant = 2;
            }
If((pm_h pm_v)==1){ //When the point is on the positive half-axis of the x-axis or the negative half-axis of the y-axis, it is concluded that the point is in the fourth quadrant
               quadrant = 4;
            }
             break;
           default:
}
var sinC = 0;
    var conC = 0;
    was sinD = 0;
    var conD = 0;
    switch(quadrant){
        case 1:
            sinC = cosB*cosA sinB*sinA; //sinC = sin(90 (B-A)) = cos(B-A) = cosB*cosA sinB*sinA
            withC = -(withoutB*cosA-cosB*withoutA); //cosC = cos(90 (B-A)) = -sin(B-A) = -(sinB*cosA-cosB*sinA)
            sinD = -(cosA*cosB-sinA*sinB); //sinD = sin(270-(A B))
            withD = -(withoutA*cosB cosA*withoutB); //conD = cos(270-(A B))
            break;
        case 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 = -(withoutA*cosB-cosA*withoutB); //conD = cos(90 (A-B))
            break;
        case 3:
            sinC = -(cosA*cosB sinA*sinB); //sinC = sin(-90 (A-B))
            withC = -(withoutA*cosB-cosA*withoutB); //conC = cos(-90 (A-B))
            sinD = (cosA*cosB-sinA*sinB); 
            conD = sinA*cosB cosA*sinB;
            break;
        case 4:
            sinC = cosA*cosB-sinA*sinB;
            withC = -(withoutA*cosB cosA*withoutB)
            sinD = -(cosA*cosB sinA*sinB); //sinD = sin(270 (A-B))
            withD = (withoutA*cosB-cosA*withoutB); //conD = cos(270 (A-B))
            break;
        default:
    }
    var tangentPointA = [point[0] b*conC, point[1] b*sinC]; //Suit A位置
    drawLine(point, tangentPointA, {color: color}); //画出切线
    drawLine(dot, tangentPointA, {color: color2}); //I'm looking forward to seeing you
    //drawArc(point, 17, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.and(sinC )*180/Math.PI, 0);
    var tangentPointB = [point[0] b*conD, point[1] b*sinD]; //SuitcaseB
    drawLine(point, tangentPointB, {color: color}); //画出切线
    drawLine(dot, tangentPointB, {color: color2}); //I'm looking forward to seeing you
    //drawArc(point, 27, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==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
    });
    //画辅助弧
    //(quadrant ==1 ||quadrant==4?360:0)
    drawArc(point, b, 60, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.and(sinC )*180/Math.PI-5);
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template