使用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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
解决layer图标icon不加载的问题
Sep 04 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
PHP4中实现动态代理
2006/10/09 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php 可变函数使用小结
2018/06/12 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
技术人员面试提纲
2013/11/28 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
出生公证书样本
2014/04/04 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
七一建党日演讲稿
2014/09/05 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
英语通知范文
2015/04/22 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
Docker官方工具docker-registry案例演示
2022/04/13 Servers