ใช้ JS เพื่อวาดแทนเจนต์

ตัวอย่าง: http://www.zhaojz.com.cn/demo/draw9.html

การคัดลอกรหัสมีดังนี้:

// วาดแทนเจนต์

//จุด

// dot center

// r radius

ฟังก์ชั่น drawcircletangent (จุด, 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}); // วาดเส้นแนวตั้งที่ศูนย์กลางของวงกลมอยู่

drawpoint ({

PW: 2, pH: 2, สี: 'Darkred', จุด: [dot [0]+9*r, dot [1], 'x']

-

drawpoint ({

PW: 2, pH: 2, สี: 'Darkred', จุด: [dot [0], dot [1] -4*r, 'y'

-

drawline (จุด, [จุด [0], dot [1]], {color: color2}); // วาดเส้นแนวตั้งจากจุดไปยังแกน x

drawline (จุด, dot, {color: color2}); // เชื่อมต่อจุดและจุด

drawline ([จุด [0] -2*r, จุด [1]], [จุด [0]+2*r, จุด [1]], {color: color2}); // วาดเส้นแนวนอนที่จุดคือ

// วาดเส้นเสริม-end

//point.push('Point ');

drawpoint ({

PW: 2, pH: 2, สี: 'Darkred', Point: Point

-

//dot.push('Centre ');

var r_square = math.pow (r, 2); // สแควร์ของ R

var point_v = จุด [1] -dot [1]; // สี่เหลี่ยมของระยะทางจากจุดหนึ่งถึงแกน x

var point_h = จุด [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

// กำหนด quadrant ที่จุดอยู่ที่ศูนย์กลางของวงกลมเป็น dot พิกัด

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 จุดอยู่ใน Quadrants ที่หนึ่งและสาม, +1, จุดอยู่ใน Quadrants ที่สองและสี่และเมื่อ 0 จุดอยู่บนแกน

สวิตช์ (HV) {

กรณีที่ 1:

if ((pm_h+pm_v) ==-2) {

Quadrant = 2; // จตุภาคที่สอง

}อื่น{

Quadrant = 4; // จตุภาคที่สี่

-

หยุดพัก;

กรณี -1:

if ((pm_h-pm_v) ==-2) {

Quadrant = 3; // จตุภาคที่สาม

-

หยุดพัก;

กรณี 0:

if ((pm_h+pm_v) ==-1) {// เมื่อจุดอยู่บนแกนครึ่งลบของแกน x หรือแกนครึ่งบวกของแกน y

Quadrant = 2;

-

if ((pm_h+pm_v) == 1) {// เมื่อจุดอยู่บนแกนครึ่งบวกของแกน x หรือแกนครึ่งลบของแกน y

Quadrant = 4;

-

หยุดพัก;

ค่าเริ่มต้น:

-

var sinc = 0;

var conc = 0;

var sind = 0;

var cond = 0;

สวิตช์ (Quadrant) {

กรณีที่ 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))

หยุดพัก;

กรณีที่ 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 -cosa*sinb); // cond = cos (90+ (ab))

หยุดพัก;

กรณีที่ 3:

sinc = -(cosa*cosb+sina*sinb); // sinc = sin (-90+ (ab))

conc = -(sina*cosb -cosa*sinb); // conc = cos (-90+ (ab))

sind = (cosa*cosb-sina*sinb);

cond = sina*cosb+cosa*sinb;

หยุดพัก;

กรณีที่ 4:

sinc = cosa*cosb-sina*sinb;

conc = -(sina*cosb+cosa*sinb)

sind = -(cosa*cosb+sina*sinb); // sind = sin (270+ (ab))

cond = (sina*cosb-cosa*sinb); // cond = cos (270+ (ab))

หยุดพัก;

ค่าเริ่มต้น:

-

var tangentpointa = [จุด [0]+b*conc, จุด [1]+b*sinc]; // ตำแหน่งของ Tangent Point A

drawline (จุด, TangentPointa, {color: color}); // วาดเส้นแทนเจนต์

drawline (dot, tangentpointa, {color: color2}); // เชื่อมต่อจุดและจุดสัมผัส

// drawarc (จุด, 17, (quadrant == 1 || quadrant == 4? 180: 0)-(quadrant == 2 || quadrant == 3? (-1): 1)*math.asin (sinc)*180/math.pi, 0);

var tangentPointb = [จุด [0]+b*cond, จุด [1]+b*sind]; // ตำแหน่งของจุดแทนเจนต์ B

drawline (จุด, TangentPointB, {color: color}); // วาดเส้นแทนเจนต์

drawline (dot, tangentPointb, {color: color2}); // เชื่อมต่อจุดและจุดสัมผัส

// drawarc (จุด, 27, (quadrant == 1 || quadrant == 4? 180: 0)-(quadrant == 2 || quadrant == 3? (-1): 1)*math.asin (sind)*180/math.pi, 0);

drawpoint ({// trag the point

PW: 3, pH: 3, สี: 'Darkred', Point: TangentPointa

-

drawpoint ({// trag the point

PW: 3, pH: 3, สี: 'Darkred', Point: TangentPointB

-

// วาดส่วนโค้งเสริม

// (quadrant == 1 || quadrant == 4? 360: 0)

drawarc (จุด, b, 60, (quadrant == 1 || quadrant == 4? 180: 0)-(quadrant == 2 || quadrant == 3? (-1): 1)*math.asin (sinc)*180/math.pi-5);

-