Relier 2 points (div) avec une div inclinée

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Projet à mettre dans mon arduino donc espace mémoire réduit

Je réalise un graphique avec des div, les points se positionnent correctement, maintenant je voudrais relier ces points avec une div inclinée de height=2px

Mes calculs semblent bon mais voila la droite n'est pas de la bonne longueur
Point peut être important tous mes calculs se font avec des valeurs en %, c'est peut être tout simplement la mon erreur
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function trait(x0, y0, x1, y1) { var y = 0; var ligne = document.createElement('div'); ligne.style.left = x0 + '%'; ligne.style.top = y0 + '%'; ligne.style.height = 2 +'px'; var ab = x1-x0; var bc = y1-y0; if (y1<y0) { bc = y0-y1; } var hypo = Math.sqrt(Math.pow(ab, 2)+Math.pow(bc, 2)); ligne.style.width = hypo + '%'; ligne.style.transformOrigin = 'left top'; var ang = Math.acos(ab / hypo); if (y0<y1) { ligne.style.transform = 'rotate('+ang+'rad)'; } else { if (y0!=y1) { ligne.style.transform = 'rotate(-'+ang+'rad)'; } } document.getElementById('graphe').appendChild(ligne); }
Pièce jointe 626464

Quand je change la taille de ma fenêtre l'écart change

Si quelqu'un a une idée, je sèche.

Merci

30/09/2022, 21h41
melka one

jour

je vois deux solution soit tu colle un evenement onresize qui effacera le graphisme et relancera la fonction soit tu utilise les pourcentage plutôt que les pixel pour le css et qui me parait la solution la plus simple

Bonjour,
comme pour ta discussion précédente il te manque un déclaration CSS sur tes lignes à savoir position:absolute pour qu'elles se placent correctement.

De plus il serait plus judicieux d'affecter une classe à ces éléments plutôt que de tout redéfinir dans la fonction.

Exemple CSS commun :

Code:

1
2
3
4
5
6
.line {
  position: absolute;
  height: 2px;
  background-color: #008;
  transform-origin: left top;
}

et JavaScript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function trait(x0, y0, x1, y1) {
  var y = 0;
  var ligne = document.createElement('div');
 
  var ab = x1 - x0;
  var bc = y1 - y0;
  if (y1 < y0) {
    bc = y0 - y1;
  }
  var hypo = Math.sqrt(Math.pow(ab, 2) + Math.pow(bc, 2));
 
  ligne.classList.add("line");
  ligne.style.left = x0 + '%';
  ligne.style.top = y0 + '%';
  ligne.style.width = hypo + '%';
 
  var ang = Math.acos(ab / hypo);
  if (y0 < y1) {
    ligne.style.transform = 'rotate(' + ang + 'rad)';
  }
  else {
    if (y0 != y1) {
      ligne.style.transform = 'rotate(-' + ang + 'rad)';
    }
  }
  document.getElementById('graphe').appendChild(ligne);
}

01/10/2022, 13h34
Speed41
Bonjour,

Merci pour vos retour

J'ai bien une classe de créé dans mon CSS, j'avais enlevé la ligne.
Je vais ajouter transform-origin: left top; dans ma classe, je n'y avais pas pensé.

Mon
Code:

1 2 3 4 5 6 7 8 9 10 11 .trait { position: absolute; display: block; } .voie0 { background: green; border-color: green; } .voie1 { background: blue; border-color: blue; }
la ligne enlevée de mon code ligne.className = 'trait voie' + donnee[0];.

Pourquoi la longueur de ma ligne (div) n'est pas de la bonne longueur ?
03/10/2022, 10h41
NoSmoking
Citation:

Pourquoi la longueur de ma ligne (div) n'est pas de la bonne longueur ?

Je dirais que si ton graphique à sa largeur égale à sa hauteur ton calcul est bon, 1% horizontal valant 1% vertical.

Si largeur et hauteur sont différentes il te faut alors tenir compte du RAPPORT_XY lors du calcul de la hauteur, dans ta fonction trait c'est la variable bc.

Donc au départ définir
Code:

1 2 3 4 const oGraphe = document.getElementById("graphe"); const H_GRAPH = oGraphe.offsetHeight; const W_GRAPH = oGraphe.offsetWidth; const RAPPORT_XY = W_GRAPH / H_GRAPH;
et dans ta fonction trait
Code:

1 2 3 4 5 6 7 var ab = x1 - x0; var bc = (y1 - y0); if (y1 < y0) { bc = y0 - y1; } bc /= RAPPORT_XY; var hypo = Math.sqrt(Math.pow(ab, 2) + Math.pow(bc, 2));
Astuce :
si tu ne veux pas que cela « saute » au redimensionnement il te faut définir différemment les dimensions de ton graphique, par exemple
Code:

1 2 3 4 5 #id-graphe { width: 100%; aspect-ratio : 3 / 4; /* ne pas définir de height elle fera 100% / 3 * 4 = 133.33% */ }
03/10/2022, 17h50
Speed41

Citation:

Envoyé par NoSmoking

Je dirais que si ton graphique à sa largeur égale à sa hauteur ton calcul est bon, 1% horizontal valant 1% vertical.

Si largeur et hauteur sont différentes il te faut alors tenir compte du RAPPORT_XY lors du calcul de la hauteur, dans ta fonction trait c'est la variable bc.

Super merci, avec les explications cela me parais évident mais j'étais resté bloqué 100% d'un côté = 100% de l'autre

Merci encore
03/10/2022, 18h59
Dave Hiock

\ô/

Citation:

Projet à mettre dans mon arduino donc espace mémoire réduit

tu n'as pas pensé à utiliser un élément canvas, il me semble que la gestion serait plus facile avec notamment moveTo et lineTo.
08/10/2022, 13h50
Speed41

Si mais cela ne me convenais pas. Je dois travailler sur l'envois d'un nombre de points limités

Merci