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

**Goups** · 01/06/2019, 10h17

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

**Watilin** · 01/06/2019, 11h55

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 (x₁, y₁) et (x₂, y₂), alors ton inconnue est y₂, et ta pente (y₂ - y₁) / (x₂ - x₁) 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 y₂ à 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().

**Goups** · 01/06/2019, 14h22

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

**Watilin** · 01/06/2019, 14h40

Je peux voir ton code ?

**Goups** · 01/06/2019, 15h24

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

**Goups** · 01/06/2019, 17h05

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager