微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用js画图之画切线

样例:

代码如下:
默认值 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时point在一三象限,+1时point在二四象限,0时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轴的负半轴或者y轴的正半轴时,断定point在第二象限 quadrant = 2; } if((pm_h+pm_v)==1){ //point在x轴的正半轴或者y轴的负半轴时,断定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]; //切点A位置 drawLine(point,tangentPointA,{color: color}); //画出切线 drawLine(dot,{color: color2}); //连接圆点与切点 //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]; //切点B位置 drawLine(point,tangentPointB,27,(quadrant ==1 ||quadrant==4?180:0)-(quadrant ==2 ||quadrant==3?(-1):1)*Math.asin(sinD)*180/Math.PI,0); drawPoint({ //描切点 pw:3,ph:3,point: tangentPointA }); drawPoint({ //描切点 pw:3,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.asin(sinC)*180/Math.PI-5); }

原文地址:https://www.jb51.cc/js/56358.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐