两点坐标与坐标轴的夹角（弧度、角度）

喜欢ヅ旅行 2024-04-18 21:36 0阅读 0赞

原文出处：[http://www.hangge.com/blog/cache/detail\_1087.html][http_www.hangge.com_blog_cache_detail_1087.html]  
开发中，有时需要计算两个坐标点组成的向量与坐标轴之间的夹角，然后我们用计算结果，来对元件进行旋转（rotation）等操作。下面分别演示与X轴、Y轴夹角的计算方法。

1，与X轴的夹角  
![2018053109085320][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>p1:Point =&nbsp;</code><code>new</code>&nbsp;<code>Point(</code><code>40</code><code>,</code><code>30</code><code>);</code></p> <p><code>var</code>&nbsp;<code>p2:Point =&nbsp;</code><code>new</code>&nbsp;<code>Point(</code><code>80</code><code>,</code><code>60</code><code>);</code></p> <p>&nbsp;</p> <p><code>var</code>&nbsp;<code>angle:</code><code>Number</code>&nbsp;<code>= Math.atan2((p2.y-p1.y), (p2.x-p1.x))&nbsp;</code><code>//弧度&nbsp; 0.6435011087932844</code></p> <p><code>var</code>&nbsp;<code>theta:</code><code>Number</code>&nbsp;<code>= angle*(</code><code>180</code><code>/Math.PI);&nbsp;</code><code>//角度&nbsp; 36.86989764584402</code></p> </td> 
  </tr> 
 </tbody> 
</table>

个人困惑：  
上面的计算方法的夹角是在X轴之下（X轴顺时针的角度），而我记忆中数学书上说的角度是在X轴之上（逆时针的角度）, 如下图：  
![20180531100223674][]  
经试验发现，如果要计与X轴逆针角度，只须将(p2.y-p1.y) 改为(p1.y-p2.y)即可

**2，与Y轴的夹角**

计算方法同与X轴夹角类似，只不过求弧度的时候把参数里的x和y坐标位置调换一下即可。  
![2018053109091329][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>p1:Point =&nbsp;</code><code>new</code>&nbsp;<code>Point(</code><code>40</code><code>,</code><code>30</code><code>);</code></p> <p><code>var</code>&nbsp;<code>p2:Point =&nbsp;</code><code>new</code>&nbsp;<code>Point(</code><code>80</code><code>,</code><code>60</code><code>);</code></p> <p>&nbsp;</p> <p><code>var</code>&nbsp;<code>angle:</code><code>Number</code>&nbsp;<code>= Math.atan2((p2.x - p1.x), (p2.y - p1.y))&nbsp;</code><code>//弧度&nbsp; 0.9272952180016122</code></p> <p><code>var</code>&nbsp;<code>theta:</code><code>Number</code>&nbsp;<code>= angle*(</code><code>180</code><code>/Math.PI);&nbsp;</code><code>//角度&nbsp; 53.13010235415598</code></p> </td> 
  </tr> 
 </tbody> 
</table>

[http_www.hangge.com_blog_cache_detail_1087.html]: http://www.hangge.com/blog/cache/detail_1087.html
[2018053109085320]: https://img-blog.csdn.net/2018053109085320
[20180531100223674]: https://img-blog.csdn.net/20180531100223674
[2018053109091329]: https://img-blog.csdn.net/2018053109091329