HTML 两元素之间自动生成连接线

背景:在工作的过程中,被提到一个需求,一个露点坐标会有一个显示数据信息的功能,而露点坐标是位于平面图的图纸上。如果用组件库的tooltip的八面位置都会挡住已有的平面图,这时候就要把数据信息的面板自定义拖拽到想放到的位置,但是需要有连线提示。移动数据面板自动生成链接线。

解决过程:

  1. 平面图上整体元素采用定位;
  2. 元素的位置信息通过translate(0px,0px)来进行表示。
  3. 那根据两点之间的x,y值来进行计算两点之间的距离以及角度。

计算角度以及长度的公式如下:

function getAngelLength(x1,y1,x2,y2){
    
    
    var a = x1-x2;
    var b = y1-y2;
    var c = Math.sqrt(a*a+b*b);
    var angel= Math.PI - Math.atan2(-b,a);
    return [c,angel]
}

连接线样式绑定长度以及角度

猜你喜欢

转载自blog.csdn.net/DragonOfMoon/article/details/127727532