Discussion :

[Speed41]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

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

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

Merci

[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

[NoSmoking]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et JavaScript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

[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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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% */
}

[Speed41]

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

[Dave Hiock]

\ô/

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.

[Speed41]

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


Merci