jsPlumb点到点连线偏移

1.最近画一个页面,需要在图中“起点”和“终点”中间构建一条连线,选择的工具是jsPlumb。jsPlumb点到点连线偏移
2.将target和source节点填充后,发现效果不对。终点向下偏移了一些。jsPlumb点到点连线偏移
3.在浏览器上查看插件生成的代码,可以看到生成的图形区域以及目标点的定位。jsPlumb点到点连线偏移。。jsPlumb点到点连线偏移
4.浏览器里面将top属性该为0,看到如下效果。
jsPlumb点到点连线偏移
jsPlumb点到点连线偏移
5.也就是说这里jsPlumb计算后的位置后,然后相对于当前容器来进行绝对布局的。所有计算出来的top值不是以当前容器来计算的。

6.查看当前容器的偏移量document.getElementById(“XXX”).offsetTop。最后计算出来的偏移量与“1”和“2”区域的高度是一致的。也就是把实际计算终点的位置是向下偏移了当前容器距离顶部的高度。。。。。。。。。。jsPlumb点到点连线偏移
7.这里我们就可以得出结论了,产生偏移的原因是由于计算终点的时候是相对于浏览器顶部来计算的,而图形绘制的时候顶点是相对于当前容器的。
8.最后解决的话需要把两个端点父容器的position属性修改下,不能是相对布局。在浏览器里面找到这些CSS,在代码里面覆盖为inherit。注意不能改成absoulte,这样会导致整个页面的布局乱掉。Style也需去掉Scope关键字。因为不太懂前端,采用了比较粗暴的方式
jsPlumb点到点连线偏移
jsPlumb点到点连线偏移jsPlumb点到点连线偏移
9.实现效果
jsPlumb点到点连线偏移