使用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 相关文章推荐
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
使用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
PHP中创建并处理图象
2006/10/09 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Vue计算属性的使用
2017/08/04 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python字符串格式化
2015/06/15 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python学生信息管理系统修改版
2018/03/13 Python
django静态文件加载的方法
2018/05/20 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
党员教师工作决心书
2014/03/13 职场文书
高中数学教学反思范文
2016/02/18 职场文书