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]
}

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

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值