IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Membre actif Avatar de Speed41
    Homme Profil pro
    Inscrit en
    novembre 2002
    Messages
    708
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France

    Informations forums :
    Inscription : novembre 2002
    Messages : 708
    Points : 208
    Points
    208
    Par défaut Relier 2 points (div) avec une div inclinée
    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);
    }
    Nom : graphique.png
Affichages : 109
Taille : 14,3 Ko

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

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

    Merci

  2. #2
    Membre expérimenté
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 77
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 652
    Points : 1 427
    Points
    1 427
    Par défaut
    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
    Plus vite encore plus vite toujours plus vite.

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 259
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 259
    Points : 41 648
    Points
    41 648
    Par défaut
    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);
    }

  4. #4
    Membre actif Avatar de Speed41
    Homme Profil pro
    Inscrit en
    novembre 2002
    Messages
    708
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France

    Informations forums :
    Inscription : novembre 2002
    Messages : 708
    Points : 208
    Points
    208
    Par défaut
    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 ?

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 259
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 259
    Points : 41 648
    Points
    41 648
    Par défaut
    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% */
    }

  6. #6
    Membre actif Avatar de Speed41
    Homme Profil pro
    Inscrit en
    novembre 2002
    Messages
    708
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France

    Informations forums :
    Inscription : novembre 2002
    Messages : 708
    Points : 208
    Points
    208
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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

  7. #7
    Membre averti
    Homme Profil pro
    OoW
    Inscrit en
    juin 2019
    Messages
    107
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OoW

    Informations forums :
    Inscription : juin 2019
    Messages : 107
    Points : 366
    Points
    366
    Par défaut
    \ô/
    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.

  8. #8
    Membre actif Avatar de Speed41
    Homme Profil pro
    Inscrit en
    novembre 2002
    Messages
    708
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France

    Informations forums :
    Inscription : novembre 2002
    Messages : 708
    Points : 208
    Points
    208
    Par défaut
    Si mais cela ne me convenais pas. Je dois travailler sur l'envois d'un nombre de points limités


    Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Relier des points pour avoir une grille
    Par Chefcou dans le forum Calcul scientifique
    Réponses: 6
    Dernier message: 22/06/2012, 09h46
  2. [Toutes versions] Relier des tables Access avec une application Java
    Par faracha21 dans le forum Access
    Réponses: 4
    Dernier message: 20/03/2010, 12h37
  3. Div avec une hauteur automatique ?
    Par tintin72 dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 04/02/2008, 18h53
  4. point rouge avec une GForce4-Ti4200-128Mo-DDR
    Par hyo006 dans le forum Composants
    Réponses: 5
    Dernier message: 20/12/2007, 19h31
  5. Probleme bottom avec une div
    Par bogsy15 dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 04/07/2007, 21h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo