Js 箭头符号随线段的方向调整/获取线段方向角

秒速五厘米 2021-09-16 12:49 340阅读 0赞

### 需求 ###

在做管线流向展示，我们有一张如下图所示的箭头符号。  
![在这里插入图片描述][70]  
    我们需要将管线符号的指向和管线流向相匹配。如下图：  
![在这里插入图片描述][70 1]

### 实现代码 ###

我们需要获得管点两端点的坐标  
    用以下方法获得箭头符号的偏转角度

function CalculateDirection(p1, p2) {
           var dx, dy, da;
           var m_dDirection = 0;
           
           dx = p2.X - p1.X;
           dy = p2.Y - p1.Y;
           
           if (dx == 0) {
               if (dy > 0) {
                   m_dDirection = 0;
               } else
               {
                   m_dDirection = 180;
               }
           } else {
               if (dx > 0) {
                   if (dy == 0) {
                       m_dDirection = 90;
                   } else {
                       if (dy > 0) {
                           da = Math.abs(dx / dy);
                           m_dDirection = Math.atan(da) * 180 / 3.14159265;
                       } else {
                           if (dy < 0) {
                               da = Math.abs(dx / dy);
                               m_dDirection = Math.atan(da) * 180 / 3.14159265;
                               m_dDirection = 180 - m_dDirection;
                           }
                       }
                   }
               } else {
                   if (dy == 0) {
                       m_dDirection = 270;
                   } else {
                       if (dy >= 0) {
                           da = Math.abs(dx / dy);
                           m_dDirection = Math.atan(da) * 180 / 3.14159265;
                           m_dDirection = 360 - m_dDirection;
                       } else {
                           da = Math.abs(dx / dy);
                           m_dDirection = Math.atan(da) * 180 / 3.14159265;
                           m_dDirection = 180 + m_dDirection;
                       }
                   }
               }
           }
           return m_dDirection;
       }

[70]: /images/20210726/84cff46782f6400aaeac9f1359bb1382.png
[70 1]: /images/20210726/d9d010169aab4c9f8cf00c5e712a3da9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

相关 067：vue+openlayers显示带箭头的线段轨迹，箭头居中（示例代码）

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第67个 [点击查看专栏目录][Link 1]

谁践踏了优雅/ 2024年04月08日 09:20/ 0 赞/ 35 阅读

相关 Element 折叠面板 Collapse 改变箭头方向默认90°

效果折叠面板改变箭头方向默认90° 点击为-90° ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

「爱情、让人受尽委屈。」/ 2022年12月06日 15:49/ 0 赞/ 466 阅读

相关栈的生长方向和内存存放方向

栈的生长方向栈的生长方向向下内存存放方向采取小端模式，内存存放方向向上图解： ![在这里插入图片描述][watermark_type_ZHJvaW

柔情只为你懂/ 2022年09月12日 06:48/ 0 赞/ 144 阅读

相关 Java的方向。。。

-------------------- 今天看到一篇关于Java体系的总结，给大家看看：一、Java SE部分 1、java基础：基础语法；面向对象（重点）；集合

╰+哭是因爲堅強的太久メ/ 2022年07月19日 01:14/ 0 赞/ 122 阅读

相关线段的重叠

X轴上有N条线段，每条线段包括1个起点和终点。线段的重叠是这样来算的， 1020 1020和 1225 1225的重叠部分为 1220 1220。给出N条线段的起点和终点，

男娘i/ 2022年06月12日 06:44/ 0 赞/ 239 阅读

相关方向

3、Web的安全与架构学习HTML5，网上有很多很多教程，以前酷壳也介绍过很多，我在这里就不罗列了。学习Web开发的安全问题（参考新浪微博被攻击的这个事，以及Rub

妖狐艹你老母/ 2022年06月10日 00:26/ 0 赞/ 126 阅读

相关线段与线段交点的推导公式

知识储备：叉乘：[http://blog.csdn.net/nightmare\_ak/article/details/77199940][http_blog.csd

淩亂°似流年/ 2021年10月01日 01:08/ 0 赞/ 591 阅读

相关 Js 箭头符号随线段的方向调整/获取线段方向角

需求在做管线流向展示，我们有一张如下图所示的箭头符号。 ![在这里插入图片描述][70] 我们需要将管线符号的指向和管线流向相匹配。如下图：

秒速五厘米/ 2021年09月16日 12:49/ 0 赞/ 341 阅读

相关 mac 方向键调整_如何调整Mac方向键的速度

![mac 方向键调整][mac] mac 方向键调整 ![macOS Logo][] Windows users moving to macOS will notice

阳光穿透心脏的1/2处/ 2021年07月27日 00:13/ 0 赞/ 881 阅读

相关线段树

转载 [https://www.cnblogs.com/TheRoadToTheGold/p/6254255.html][https_www.cnblogs.com_TheRo

心已赠人/ 2021年07月16日 15:21/ 0 赞/ 484 阅读