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 :

Faire varier une droite par le déplacement d'un curseur en JS


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Rédacteur technique
    Inscrit en
    Février 2018
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Rédacteur technique

    Informations forums :
    Inscription : Février 2018
    Messages : 14
    Par défaut Faire varier une droite par le déplacement d'un curseur en JS
    Bonjour,
    je souhaites faire varier la pente d'une droite en déplaçant un curseur.
    .... j’arrive à faire afficher un chiffre de 0 à 100 grâce à un curseur ... j’arrive à faire afficher ma droite, .... mais je n'arrive pas à faire les deux dans la même page.
    Bref je n'arrives pas à faire passer d'un script à l'autre le contenu de la variable "var droite".

    Je vous mets d'abord le script du curseur :
    Code HTML : 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
    CODE : <HTML>
    <!-- curseur --> 
    <form action="input-type-range-min-max.php" method="post">
    <input type="range" id="champ" name="range" value="5" min="0" max="100" step="5">
    </form>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript"> 
    // affichage de la variable
    $(function()
            { 
            $("#champ").after('<output></output>');
            $("#champ").live('change', function()
                    { var droite = $(this).val(); $('output').text(droite); } ); 
            }); 
    </script>
    </html>


    Puis le script de la droite :
    Code HTML : 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
    <HTML>
    <canvas id="moncanevas" width="1200" height="220"></canvas>
    <script type="text/javascript"> 
    // Variable qui devrait provenir du "curseur" 
    var droite = 10 ; 
    // Tracé de la droite
    canvas = document.getElementById("moncanevas"); 
    if (canvas.getContext)
            { context = canvas.getContext('2d'); }
    function drawLine()
            { 
            context.strokeStyle='green';
            context.lineCap='round';
            context.lineWidth=4; 
            context.moveTo(310,190);
            context.lineTo(690,droite);
            context.stroke(); 
            } 
    drawLine();
    </script>
    </body>
    </html>

    J'attends avec impatience toute aide (avec si possible en utilisant des mots pour débutants)
    Cordialement
    Goups

  2. #2
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Bonjour,
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    context.moveTo(310,190);
    context.lineTo(690,droite);
    Actuellement la seule partie variable dans ces instructions c’est droite, qui est une coordonnée y d’un point de ta droite. Or ta donnée de départ n’est pas un y mais une pente, qui est un rapport dy/dx. On a coutume d’appeler une pente a, comme dans la formule y = a*x + b.
    Si les points sont nommés (x1, y1) et (x2, y2), alors ton inconnue est y2, et ta pente (y2 - y1) / (x2 - x1) est égale à la valeur de l’input, que tu as appelée droite mais que je préfère appeler a. Tu peux donc calculer y2 à partir de l’égalité suivante :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    a = (y2 - y1) / (x2 - x1)
    <=>
    a * (x2 - x1) = y2 - y1
    <=>
    a * (x2 - x1) + y1 = y2
    Avec les valeurs utilisées dans ton code, on a alors y2 = a * (690 - 310) + 190.

    D’autre part, pour pouvoir redessiner ta droite à chaque fois que la valeur de l’input change, il faut appeler ta fonction drawLine() à l’intérieur de la fonction de l’évènement 'change'. Et comme un canevas ne s’efface pas tout seul entre deux dessins, tu auras sans doute besoin de .clearRect().
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre averti
    Homme Profil pro
    Rédacteur technique
    Inscrit en
    Février 2018
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Rédacteur technique

    Informations forums :
    Inscription : Février 2018
    Messages : 14
    Par défaut
    Merci de la réponse ..
    en effet j'ai appelé "droite" ma variable, alors que je ne veux en effet que bouger sa pente... mais comment varie la pente n'est pas encore vraiment mon problème ...

    J'ai bien tenté d'appeler la fonction drawLine() à l’intérieur de la fonction de l’évènement 'change' .... (à différents endroits) mais manifestement je n'y arrive pas.

    Je pense que ne l'appelles pas au bon endroit.
    Cordialement
    Goups

  4. #4
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Je peux voir ton code ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Membre averti
    Homme Profil pro
    Rédacteur technique
    Inscrit en
    Février 2018
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Rédacteur technique

    Informations forums :
    Inscription : Février 2018
    Messages : 14
    Par défaut
    Oui bien sur, j'ai juste assemblé les deux :

    Code HTML : 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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <HTML>
    <canvas id="moncanevas" width="1200" height="220"></canvas>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">function drawLine()</script>
     
    <!-- curseur --> 
    <form action="input-type-range-min-max.php" method="post">
    <input type="range" id="champ" name="range" value="5" min="0" max="100" step="5">
    </form>
     
    <script type="text/javascript"> 
    // affichage de la variable
    $       (function ()
                    { 
                    $("#champ").after('<output></output>');
                    $("#champ").live('change', function()
                            { var droite = $(this).val(); $('output').text(droite); } ); 
                    }
            ); 
     
    //var droite = 10 ; 
     
    // Tracé de la droite
    canvas = document.getElementById("moncanevas"); 
    if (canvas.getContext)
            { context = canvas.getContext('2d'); }
    // Caractéristique de la droite
            { 
            context.strokeStyle='green';
            context.lineCap='round';
            context.lineWidth=4; 
            context.moveTo(310,190);
            context.lineTo(690,droite);
            context.stroke(); 
            context.clearRect(10, 10, 100, 100);
            } 
    drawLine();
    </script>
    </body>
    </html>

    comme cela, il est évident que pour voir la droite, il faut afficher '//var droite = 10 ; '

    Cordialement
    Goups

  6. #6
    Membre averti
    Homme Profil pro
    Rédacteur technique
    Inscrit en
    Février 2018
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Rédacteur technique

    Informations forums :
    Inscription : Février 2018
    Messages : 14
    Par défaut
    Je reviens sur la dernière précision :
    quand je dis : comme cela, il est évident que pour voir la droite, il faut afficher '//var droite = 10 ; '

    c'est en attendant que cela fonctionne, car le but est que je puisse supprimer cette ligne

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

Discussions similaires

  1. [AC-2003] Faire évoluer une valeur par défaut
    Par rjl dans le forum IHM
    Réponses: 9
    Dernier message: 10/08/2009, 20h50
  2. [MySQL] Faire varier une liste en fonction d'une autre dans un formulaire
    Par lemirandais dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 19/01/2009, 22h45
  3. [Dates] Faire varier une donnée toutes les 30 minutes
    Par esther60 dans le forum Langage
    Réponses: 7
    Dernier message: 18/04/2008, 20h18
  4. [Macro de Recherche] Comment faire varier une 4eme variable
    Par Vin_SuFu_R@T dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 15/01/2008, 12h35
  5. faire varier une condition
    Par PAYASS59 dans le forum Langage SQL
    Réponses: 3
    Dernier message: 27/08/2007, 14h52

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