JavaScript使用atan2来绘制箭头和曲线的实例


Posted in Javascript onSeptember 14, 2017

最近搞Canvas绘图,知道了JavaScript中提供了atan2(y,x)这样一个三角函数。乍眼一看,不认识,毕竟在高中时,学过的三角函数有:sin,cos,arcsin,arccos,tan,arctan等,并没有这个。而工作中又需要用到它,所以这里就做了个简单的了解。

在坐标系中理解tan atan

回顾一下三角函数tan

tanθ,用三角函数来表示时,它的值等于sinθ/cosθ,如果将其放到坐标系中,它的的值等价于:dy/dx。在坐标系中,任意两个点所组成的直线,相对于x轴的斜率就是tanθ = dy /dx,相对于y轴的斜率就是dx/dy ,此时我们用cot来表示;其中,dy 是两个点的y坐标的差值,dx是两个点的x坐标的差值。

那么坐标系内除了y轴,任何一个点(x,y),相对于x轴的斜率就是y-0/x-0,也即是y/x

JavaScript使用atan2来绘制箭头和曲线的实例

我们将tanθ称为一条直线相对于x轴的斜率,那么θ就是相对于x轴的夹角(旋转角度)了。

tan,是根据角度计算斜率的。那么反过来 arctan(反正切)自然就认为是根据斜率来计算角度的。

为何存在atan2 ?

JavaScript中,提供了两个arctan函数,一个是atan, 一个是atan2 atan就是我们所熟知arctan。其实在很多编程语言中都提供了atan2

那么atan2又是怎么回事呢?

要知道这个,需要知道arctan的不足之处:

arctan的返回值范围是(-π/2, π/2) 不包括, ±π/2,也就是(两个点组成的直线与x轴夹角是90°)90°是计算不出来的。为啥呢?在计算arctan ( dy/dx)时,如果两个点(x1,y1),(x2,y2)组成的直线与x轴的夹角呈90°时,dx= x2-x1 = 0 0 是不能作为除数的,所以就无法计算这种情形。

值的范围也就是计算的角度的范围在(-π/2, π/2),从坐标系来看,这个角度的范围只能是在第14象限,并不能表示出第23象限的角。

为了弥补atan的不足,在计算机编程领域,引入了atan2函数,它的计算结果是在(-π,π]。它正好可以覆盖整个坐标系,包括90°的情形。

它的计算过程是怎样的呢?

关于这个,我从wikipedia上摘取了它的计算过程:

JavaScript使用atan2来绘制箭头和曲线的实例

atan2的应用

在第一小节中的那张图中的坐标系,是我们熟知的。在HTMLCanvas中,坐标系并不像我们熟知的坐标系那样。它是这样的:

x轴正向沿顺时针方向,所经过的角度分别是0,π/2, π,3π/22π。

x轴正向沿逆时针方向,所经过的角度分别是0-π/2, -π,-3π/2-2π。

JavaScript使用atan2来绘制箭头和曲线的实例

atan2的结果在(-π,π]之间,恰好一周,四个象限全覆盖。从坐标系来看,顺时针方向的值是正值,逆时针方向的值是负的。

从坐标系上来看,atan2结果是(0,-π)时就表示,从x轴正向逆时针方向转最大 π弧度(180角度)。同理,(0,π)表示从x轴正向顺时针转最大π弧度(180角度)。

在第1)小节中说了atan可以用来计算平面坐标系内任意两点的连线与x轴正向之间的夹角。而atan2atan的补充,那么使用atan2自然就可以来计算平面坐标系内任意两点的连线与x轴正向之间的夹角了。

如果两个点在第一象限内:

JavaScript使用atan2来绘制箭头和曲线的实例

如果两个点在第四象限内:

JavaScript使用atan2来绘制箭头和曲线的实例

如果两个点在不同的象限内,我们也可以平移来看。

何时需要使用atan2 ?

目前我遇到了两种情况,是通过atan2来解决的:

1) 在平面坐标系内任意两个点间画一条带有箭头的直线(可以是单向箭头,可以是双向箭头)。在这个需求中,另外也知道了箭头的一条边与直线的夹角和箭头的长度。

这个需求的难点就是要计算出箭头的另外两个点坐标。

2) 在平面坐标系内任意两个点之间画一条指定曲率的曲线(arc)。在这个需求中,要计算arc,自然要知道radius, startAngle, endAngle,圆心坐标。可以根据曲率来计算出半径等,但是难点在计算圆心坐标。

这两个需求的共同特点是:

1)两个已知的点

2)根据这两个点和其他的条件去计算一些必须的(画line,arc等必须的)点坐标。

目前我遇到了这两种需求,都通过atan2来解决的。其他的情况,目前尚且未知,待后续发现时,补充上。

以上这篇JavaScript使用atan2来绘制箭头和曲线的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
原生js实现淘宝放大镜效果
Oct 28 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
javascript实现前端分页效果
Jun 24 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 #Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 #Javascript
对于js垃圾回收机制的理解
Sep 14 #Javascript
使用SVG基本操作API的实例讲解
Sep 14 #Javascript
JSON 数据格式详解
Sep 13 #Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 #Javascript
详解动画插件wow.js的使用方法
Sep 13 #Javascript
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
一行python实现树形结构的方法
2019/08/09 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
工作推荐信范文
2014/05/10 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
综治工作心得体会
2014/09/11 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js