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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
javascript实现连续赋值
Aug 10 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
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
PHP中的cookie
2006/11/26 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
python中字典(Dictionary)用法实例详解
2015/05/30 Python
浅谈对yield的初步理解
2017/05/29 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
奥巴马演讲稿
2014/01/08 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
神农溪导游词
2015/02/11 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
微信小程序实现聊天室功能
2021/06/14 Javascript
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers