首先申明一点,如果没有解决欢迎来打脸(因为CSDN之前有一个类似的帖子,但没有彻底解决问题,纯粹是骗分)!!!!
本文所提的版本为jtopo-0.4.8-dev,所有的修改也都是基于此版本,修改后的两个节点正反双向连接效果如下:
三条连线、四条连线:
多条正反方向随意连接也没有问题:
这是三条正向、三条反向的连线,效果很明显,没有任何的重合,好了,废话不多说,进入正题说说具体的实现。
连线重合,打眼一看应该是计算路径出现了问题,那么我们直接看源代码路径函数是怎么实现的
从上图可以看出,计算连线路径的思路其实和简单,首先通过e函数求出当前连线关联的两个节点间总共的连线条数,var d = e(this.nodeA, this.nodeZ);如果d==1,那么就直接返回了首位节点的坐标,因为不需要拐点,直线连接就行了,只有一条连线;如果d不等于1(这里只能是大于1了,为啥大于自己想啊),就需要拐点来防止连线重合了,所以下面的大段算法就是通过三角函数计算出了中间的两个拐点的坐标,和首位节点坐标总共四个坐标返回了,所以问题肯定出在了三角算法这里,正反双向两条连线完全重合,肯定是所有的坐标点完全重合了(通过断点跟踪确定证实我的猜想是对的),在返回的路径数组中,正向的四个坐标点和反向的四个坐标点完全相同,只是顺序反了,比如正向坐标返回的是[(10,1),(10,2),(-10,1),(-10,2)],反向连线返回的坐标是[(-10,2),(-10,1),(10,2),(10,1)],很明显所有的点都在一条折线上(这里只是举例,不必深究坐标点是否合理),好了,大概的病根处是确定了,确定就是三角函数计算中间的两个拐点出的问题,也就是说最终返回数组a的0,、1下标的坐标点算错了,而拐点的变量是m、n坐标点,影响m、n坐标点的是k和l,很明显k是常量,最有嫌疑的是l, l = this.bundleGap * this.nodeIndex,而this.bundleGap也是一个常量,所以唯一可能错了的就是 this.nodeIndex,再看看nodeIndex是怎么实现的
不必慌,再看看e函数的实现:
好了,现在清楚了 this.nodeIndex就是计算出两个节点间所有连线的总数再减一,然后作为当前连线的nodeIndex的,这样做咋一看没啥问题,但是问题恰恰就出在了这里,nodeIndex应该是同方向的连线的下标,因为我们画的是有向线段,找到了问题的根节点,想必大家都知道应该怎么做了,这里不再累述,自己动手实现吧。下边是笔者自己修复后的代码,按照上面的分析做了相应的代码改动,经过验证,彻底解决了连线重复的问题(顺便调整了鼠标滚动缩放反向的问题),有问题、有疑问欢迎留言,欢迎指正,大家一起学习,共同进步。
最后,博主有一个小小的心愿,就是希望大家点一下下方的点赞、分享和收藏,博主希望大家都支持下,后期有好的东西我会继续分享给大家。