使用js畫(huà)圖之畫(huà)切線(xiàn)
更新時(shí)間:2015年01月12日 15:46:02 投稿:hebedich
這篇文章主要介紹了使用js繪制幾何圖形系列教程中的畫(huà)切線(xiàn)篇,非常方便我們好好熟悉理解javascript,推薦給大家
樣例:http://www.zhaojz.com.cn/demo/draw9.html
復(fù)制代碼 代碼如下:
//畫(huà)切線(xiàn)
//point 圓外的一點(diǎn)
//dot 圓心
//r 半徑
function drawCircleTangent(point, dot, r){
//畫(huà)輔助線(xiàn)-start
var color = 'DarkRed'; //切線(xiàn)的顏色
var color2 = "#ccc"; //其它輔助線(xiàn)的顏色
drawLine(dot, [dot[0]+9*r,dot[1]], {color: color2}); // 延長(zhǎng)圓心所在的水平線(xiàn)
drawLine(dot, [dot[0],dot[1]-4*r], {color: color2}); // 畫(huà)出圓心所在的垂直線(xiàn)
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}); // 畫(huà)point到x軸的垂直線(xiàn)
drawLine(point, dot, {color: color2}); // 連接point與dot
drawLine([point[0]-2*r, point[1]], [point[0]+2*r, point[1]], {color: color2}); //畫(huà)point所在的水平線(xiàn)
//畫(huà)輔助線(xiàn)-end
//point.push('point');
drawPoint({
pw:2,ph:2,color:'DarkRed',point: point
});
//dot.push('centre');
var r_square = Math.pow(r,2); // r的平方
var point_v = point[1]-dot[1]; //point到x軸的距離的平方
var point_h = point[0]-dot[0]; //point到y(tǒng)軸的距離的平方
var c_square = Math.pow(point_v,2) + Math.pow(point_h,2); //point到圓心的距離的平方
var c = Math.sqrt(c_square); //point到圓心的距離
var sinA = Math.abs(point_v)/c; //sinA
var cosA = Math.abs(point_h)/c; //cosA
var b_square = c_square-r_square; //point到切點(diǎn)的距離的平方
var b = Math.sqrt(b_square); //point到切點(diǎn)的距離
var sinB = b/c; //sinB
var cosB = r/c; //cosB
//以圓心為坐標(biāo)圓點(diǎn),確定point所在的象限
var quadrant = 1; //默認(rèn)值
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時(shí)point在一三象限,+1時(shí)point在二四象限,0時(shí)point在軸上
switch(hv){
case 1:
if((pm_h+pm_v)==-2){
quadrant = 2; //第二象限
}else{
quadrant = 4; //第四象限
}
break;
case -1:
if((pm_h-pm_v)==-2){
quadrant = 3; //第三象限
}
break;
case 0:
if((pm_h+pm_v)==-1){ //point在x軸的負(fù)半軸或者y軸的正半軸時(shí),斷定point在第二象限
quadrant = 2;
}
if((pm_h+pm_v)==1){ //point在x軸的正半軸或者y軸的負(fù)半軸時(shí),斷定point在第四象限
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]; //切點(diǎn)A位置
drawLine(point, tangentPointA, {color: color}); //畫(huà)出切線(xiàn)
drawLine(dot, tangentPointA, {color: color2}); //連接圓點(diǎn)與切點(diǎn)
//drawArc(point, 17, (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]; //切點(diǎn)B位置
drawLine(point, tangentPointB, {color: color}); //畫(huà)出切線(xiàn)
drawLine(dot, tangentPointB, {color: color2}); //連接圓點(diǎn)與切點(diǎn)
//drawArc(point, 27, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.asin(sinD)*180/Math.PI, 0);
drawPoint({ //描切點(diǎn)
pw:3,ph:3,color:'DarkRed',point: tangentPointA
});
drawPoint({ //描切點(diǎn)
pw:3,ph:3,color:'DarkRed',point: tangentPointB
});
//畫(huà)輔助弧
//(quadrant ==1 ||quadrant==4?360:0)
drawArc(point, b, 60, (quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.asin(sinC)*180/Math.PI-5);
}
相關(guān)文章
JS腳本根據(jù)手機(jī)瀏覽器類(lèi)型跳轉(zhuǎn)WAP手機(jī)網(wǎng)站(兩種方式)
隨著移動(dòng)互聯(lián)網(wǎng)的不斷普及,企業(yè)的網(wǎng)絡(luò)宣傳不僅只局限在PC端,還要在移動(dòng)端發(fā)展。我們?cè)谧约旱木W(wǎng)站做了WAP手機(jī)完整之后,如果有用戶(hù)通過(guò)手機(jī)訪(fǎng)問(wèn)我們的企業(yè)頂級(jí)域名網(wǎng)站,就要判斷跳轉(zhuǎn)到專(zhuān)為的WAP網(wǎng)站,下面小編給大家整理有關(guān)手機(jī)瀏覽器跳轉(zhuǎn)WAP手機(jī)網(wǎng)站的相關(guān)內(nèi)容2015-08-08JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)代碼實(shí)例
在本篇文章里我們給大家分享了關(guān)于JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)的相關(guān)實(shí)例代碼,有需要的朋友們可以學(xué)習(xí)下。2018-10-10聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)
“繼承”是面向?qū)ο缶幊汤锩娼?jīng)常提及到的概念,它的目的是實(shí)現(xiàn)代碼復(fù)用。這篇文章主要介紹了聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn),有興趣的可以了解一下。2017-04-04JavaScript中的立即執(zhí)行函數(shù)表達(dá)式介紹
這篇文章主要介紹了JavaScript中的立即執(zhí)行函數(shù)表達(dá)式介紹,本文著重講解了什么是立即調(diào)用函數(shù)表達(dá)式,需要的朋友可以參考下2015-03-03