背景:在工作的过程中,被提到一个需求,一个露点坐标会有一个显示数据信息的功能,而露点坐标是位于平面图的图纸上。如果用组件库的tooltip的八面位置都会挡住已有的平面图,这时候就要把数据信息的面板自定义拖拽到想放到的位置,但是需要有连线提示。移动数据面板自动生成链接线。
解决过程:
- 平面图上整体元素采用定位;
- 元素的位置信息通过translate(0px,0px)来进行表示。
- 那根据两点之间的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]
}
连接线样式绑定长度以及角度