Gere automaticamente linhas de conexão entre dois elementos HTML

Antecedentes: No processo de trabalho, foi mencionado um requisito de que uma coordenada de ponto de orvalho terá a função de exibir informações de dados e a coordenada de ponto de orvalho está localizada no desenho do plano. Se os oito lados da dica de ferramenta da biblioteca de componentes bloquearem a planta baixa existente, neste momento você deve arrastar e soltar o painel de informações de dados para a posição desejada, mas é necessário um prompt de conexão. O painel de dados móveis gera linhas de link automaticamente.

Processo de solução:

1. Os elementos gerais da planta adotam posicionamento;
2. A informação de posição do elemento é representada por translate(0px,0px).
3. Em seguida, calcule a distância e o ângulo entre os dois pontos com base nos valores x e y entre os dois pontos.

As fórmulas para calcular o ângulo e o comprimento são as seguintes:

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

Comprimento e ângulo de encadernação estilo conector