Use JS drawing to draw the tangent _javascript skill

Source: Internet
Author: User
Tags abs asin cos pow sin

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

Copy Code code as follows:

Draw Tangent
Point round outside the dot
Dot Center
R radius
function drawcircletangent (point, Dot, R) {
Draw Auxiliary Line-start
var color = ' darkred '; The color of the tangent
var color2 = "#ccc"; Color of other guides
DrawLine (dot, [dot[0]+9*r,dot[1]], {color:color2}); Extend the horizontal line where the center of the circle
DrawLine (dot, [Dot[0],dot[1]-4*r], {color:color2}); Draw the vertical line where the center of the circle is
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 the vertical line to the X axis
DrawLine (point, Dot, {color:color2}); Connecting 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
Draw Auxiliary Line-end
Point.push (' point ');
Drawpoint ({
Pw:2,ph:2,color: ' darkred ', point:point
});
Dot.push (' centre ');
var r_square = Math.pow (r,2); The square of R
var point_v = point[1]-dot[1]; The square of the distance from point to 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 center
var c = math.sqrt (C_square); The distance from point to center
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
var B = math.sqrt (B_square); The distance from point to tangent
var sinb = b/c; Sinb
var cosb = r/c; Cosb
With the center of the circle as the coordinate dot, determine the quadrant where the point is
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,-1 o'clock Point in the 13 quadrant, + 1 o'clock in the 24 quadrant, and 0 o'clock on the axis
Switch (HV) {
Case 1:
if ((Pm_h+pm_v) ==-2) {
Quadrant = 2; Second Quadrant
}else{
Quadrant = 4; Quadrant Four
}
Break
Case-1:
if ((Pm_h-pm_v) ==-2) {
Quadrant = 3; Third Quadrant
}
Break
Case 0:
if ((Pm_h+pm_v) ==-1) {//point is in the negative half axis of the x-axis or the positive half of the y-axis, it is concluded that point is in the second quadrant
Quadrant = 2;
}
if ((Pm_h+pm_v) ==1) {//point on the positive half of the x-axis or the negative half of the y-axis, determine that point is in the fourth quadrant
Quadrant = 4;
}
Break
Default
}
var SinC = 0;
var conc = 0;
var 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
Conc =-(Sinb*cosa-cosb*sina); CosC = cos (90+ (b-a)) =-sin (b-a) =-(Sinb*cosa-cosb*sina)
SinD =-(COSA*COSB-SINA*SINB); SinD = sin (270-(a+b))
ConD =-(SINA*COSB+COSA*SINB); 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))
ConD =-(SINA*COSB-COSA*SINB); ConD = cos (90+ (a-b))
Break
Case 3:
SinC =-(COSA*COSB+SINA*SINB); SinC = sin ( -90+ (a-b))
Conc =-(SINA*COSB-COSA*SINB); conc = cos ( -90+ (a-b))
SinD = (COSA*COSB-SINA*SINB);
ConD = SINA*COSB+COSA*SINB;
Break
Case 4:
SinC = COSA*COSB-SINA*SINB;
Conc =-(SINA*COSB+COSA*SINB)
SinD =-(COSA*COSB+SINA*SINB); SinD = sin (270+ (a-b))
ConD = (SINA*COSB-COSA*SINB); ConD = cos (270+ (a-b))
Break
Default
}
var Tangentpointa = [Point[0]+b*conc, point[1]+b*sinc]; Tangent point a position
DrawLine (Point, Tangentpointa, {color:color}); Draw the Tangent
DrawLine (dot, Tangentpointa, {color:color2}); Connecting Dots and Pointcuts
DrawArc (Point, quadrant ==1 | | quadrant==4?180:0)-(Quadrant ==2 | | Quadrant==3? ( -1): 1) *math.asin (SinC) *180/math.pi, 0);
var tangentpointb = [Point[0]+b*cond, Point[1]+b*sind]; Tangent point B position
DrawLine (Point, Tangentpointb, {color:color}); Draw the Tangent
DrawLine (dot, tangentpointb, {color:color2}); Connecting Dots and Pointcuts
DrawArc (Point, quadrant ==1 | | quadrant==4?180:0)-(Quadrant ==2 | | Quadrant==3? ( -1): 1) *math.asin (SinD) *180/math.pi, 0);
Drawpoint ({//Stroke tangent
Pw:3,ph:3,color: ' darkred ', Point:tangentpointa
});
Drawpoint ({//Stroke tangent
Pw:3,ph:3,color: ' darkred ', POINT:TANGENTPOINTB
});
Draw Auxiliary Arc
(Quadrant ==1 | | quadrant==4?360:0)
DrawArc (point, B, quadrant, ==1 | | quadrant==4?180:0)-(Quadrant ==2 | | Quadrant==3? ( -1): 1) *math.asin (SinC) *180/math.pi-5);
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.