使用js画图之画切线


Posted in Javascript onJanuary 12, 2015

样例:http://www.zhaojz.com.cn/demo/draw9.html

//画切线

//point 圆外的一点

//dot 圆心

//r 半径

function drawCircleTangent(point, dot, r){

    //画辅助线-start

    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,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}); // 画point到x轴的垂直线

    drawLine(point, dot, {color: color2}); // 连接point与dot

    drawLine([point[0]-2*r, point[1]], [point[0]+2*r, point[1]], {color: color2}); //画point所在的水平线

    //画辅助线-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轴的距离的平方

    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到切点的距离的平方

    var b = Math.sqrt(b_square); //point到切点的距离

    var sinB = b/c; //sinB

    var cosB = r/c; //cosB

    //以圆心为坐标圆点,确定point所在的象限

    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时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, tangentPointA, {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, {color: color}); //画出切线

    drawLine(dot, tangentPointB, {color: color2}); //连接圆点与切点

    //drawArc(point, 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,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.asin(sinC)*180/Math.PI-5);

}
Javascript 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
使用js画图之饼图
Jan 12 #Javascript
javacript使用break内层跳出外层循环分析
Jan 12 #Javascript
使用js画图之正弦曲线
Jan 12 #Javascript
使用js画图之圆、弧、扇形
Jan 12 #Javascript
js函数与php函数的区别实例浅析
Jan 12 #Javascript
使用JS画图之点、线、面
Jan 12 #Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 #Javascript
You might like
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
一段多浏览器的"复制到剪贴板"javascript代码
2007/03/27 Javascript
不懂JavaScript应该怎样学
2008/04/16 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
python使用装饰器作日志处理的方法
2019/07/11 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
生产班组长岗位职责
2014/01/05 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
气象学专业个人求职信
2014/04/22 职场文书
青年志愿者活动总结
2014/04/26 职场文书
群众路线剖析材料
2014/09/30 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
幼儿园六一主持词
2015/06/30 职场文书
python实现简单区块链结构
2021/04/25 Python
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python