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

**Watilin** · 01/06/2019, 19h22

Alors. Tu as quelques petits problèmes de syntaxe. Dans la console F12, tu devrais voir des messages d’erreur.

pour commencer, cette balise de script :

Code html :

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

<script type="text/javascript" src="...jquery.min.js">function drawLine()</script>

Quand une balise <script> a un attribut src, son contenu est ignoré, donc le code function drawLine() n’est pas interprété ; de plus, il n’est pas syntaxiquement correct.

Ici :

Code :

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

1
2
if (canvas.getContext)
        { context = canvas.getContext('2d'); }

Et après :

Code :

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

1
2
3
4
5
6
7
8
9
        {
        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);
        }

Tu as deux blocs d’instructions entre accolades { … }. Le premier est associé au if ; le second était le corps de la function drawLine() dans la version précédente de ton code, mais tu as déplacé la ligne qui déclarait la fonction depuis.
Ce bloc de code n’émet pas en lui-même d’erreur de syntaxe, car en JS on a le droit de mettre des blocs entre accolades où on veut.

Enfin, l’appel de fonction drawLine(); échoue car la fonction n’a pas été déclarée. Tu devrais avoir une erreur du genre drawLine is not defined.

D’autre part, ce n’est pas crucial mais la version de jQuery que tu utilises est très ancienne (aujourd’hui la dernière version est la 3.4.1), et la méthode .live() est obsolète, à la place on utilise .on(). Même le réseau de distribution ajax.googleapis.com est un vieux truc, tu peux utiliser directement https://code.jquery.com/ (suis les instructions sur la page).

Puisque tu débutes, je t’encourage vivement à utiliser le mode strict, qui te forcera à adopter de bonnes habitudes, notamment toujours déclarer ses variables.

On va faire deux choses :

corriger les erreurs de syntaxe ;
ajouter un paramètre à drawLine(), pour pouvoir passer une pente différente à chaque appel, comme ceci : drawLine(pente).

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Faire varier une droite</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<canvas id="moncanevas" width="1200" height="220"></canvas>
 
<!-- 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">
 
"use strict";
 
// Tracé de la droite
function drawLine(pente) {
  // constantes de l’équation de droite
  const x1 = 310;
  const x2 = 690;
  const y1 = 190;
 
  var canvas = document.getElementById('moncanevas');
  var context = canvas.getContext('2d');
 
  context.clearRect(10, 10, 100, 100);
 
  // Caractéristique de la droite
  context.strokeStyle = 'green';
  context.lineCap = 'round';
  context.lineWidth = 4;
 
  var y2 = pente * (x2 - x1) + y1;
 
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
}
 
// Fonction appelée au chargement de la page
$(function () {
  $("#champ").after('<output></output>');
 
  $("#champ").on('change', function () {
    var pente = $(this).val();
    $('output').text(pente);
    drawLine(pente);
  });
 
  drawLine();
});
 
</script>
</body>
</html>

Même avec tout ça, on n’est pas au bout de nos peines, car le canevas nous réserve une dernière surprise. Tu t’attends sans doute à ce que les y aillent vers le haut, comme dans la plupart des graphiques. Mais dans un canevas, le point d’origine est le coin en haut à gauche et les y vont vers le bas, ce qui fait que ta droite part dans le mauvais sens. Il faudra utiliser -y1 et -y2 à la place de y1 et y2, respectivement. Mais il faudra aussi sans doute ajouter une partie constante. C’est à toi de modifier tes valeurs pour que ça s’affiche à l’endroit que tu veux. J’ai déclaré des constantes dans la fonction pour t’aider, mais comme je ne sais pas à quoi doit ressembler le graphique au final, je ne peux pas t’aider.

**Goups** · 01/06/2019, 20h26

Merci beaucoup de ta réponse ...

Au moins le curseur fait bouger la droite.... j'ai 'adapté' la droite à mes besoins, ce qui donne ceci :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Faire varier une droite</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<canvas id="moncanevas" width="1000" height="220"></canvas>
 
<!-- curseur -->
<form action="input-type-range-min-max.php" method="post">
  <input type="range" id="champ" name="range" value="50" min="0" max="100" step="5" />
</form>
 
<script type="text/javascript">
 
"use strict";
 
// Tracé de la droite
function drawLine(pente) {
  // constantes de l’équation de droite
  const x1 = 300;
  const x2 = 700;
  const y1 = 200;
 
  var canvas = document.getElementById('moncanevas');
  var context = canvas.getContext('2d');
 
  context.clearRect(10, 10, 100, 100);
 
  // Caractéristique de la droite
  context.strokeStyle = 'green';
  context.lineCap = 'round';
  context.lineWidth = 4;
 
  var y2 = pente ;
 
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
}
 
// Fonction appelée au chargement de la page
$(function () {
  $("#champ").after('<output></output>');
 
  $("#champ").on('change', function () {
    var pente = $(this).val();
    $('output').text(pente);
    drawLine(pente);
  });
 
  drawLine();
});
 
</script>
</body>
</html>

Il y a une chose bizarre, c'est que la droite ne s'efface pas quand on en dessine une nouvelle ...

Une chose est sûre tu viens de me faire progresser d'un pas de géant.
Cordialement
Goups

**Goups** · 02/06/2019, 06h39

Je pense avoir trouvé,

il suffit de mettre des bornes suffisamment larges:

Code :

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

 context.clearRect(0, 0, 1000, 1000);

et la droite s'efface.

Un grand merci pour ta patience et ton aide précieuse.

Cordialement
Goups

**NoSmoking** · 02/06/2019, 09h20

Bonjour,
• tu peux avantageusement remplacer

Code :

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

context.clearRect(0, 0, 1000, 1000);

par

Code :

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

context.clearRect(0, 0, canvas.width, canvas.height);

• de même pour avior une mise à jour « immédiate » de ta courbe tu remplacer l’événement change

Code :

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

$("#champ").on('change', function () {

par input

Code :

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

$("#champ").on('input', function () {

• enfin tu pourrais mettre en « cache » les données

Code :

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

1
2
3
4
5
6
  // constantes de l’équation de droite
  const x1 = 300;
  const x2 = 700;
  const y1 = 200;
  var canvas = document.getElementById('moncanevas');
  var context = canvas.getContext('2d');

pour ne pas les laisser dans la fonction drawLine et les réinterpréter à chaque appel de celle-ci.

[EDIT] arf !! je n'avais pas vu

Envoyé par Watilin

J’ai déclaré des constantes dans la fonction pour t’aider, ...

**Goups** · 02/06/2019, 11h50

Bonjour,
Parfait (surtout le Input qui permet vraiment de bouger la droite)

maintenant , il va me rester deux pb
1 pour bien faire il me faudrait un rectangle à l'arrière plan qui pour l'instant s'efface ou qui se mets au dessus quand je lui donnes un autre id de "canvas" ... il faut que j'arrives à les superposer.
2 au final, il faudrait plusieurs curseurs un pour la pente, un pour le pied de pente etc..

Donc j'ai encore un peu de recherche.

Merci déjà pour tout
Cordialement Goups

**Watilin** · 02/06/2019, 12h04

Envoyé par NoSmoking

• enfin tu pourrais mettre en « cache » les données

Code :

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

1
2
3
4
5
6
  // constantes de l’équation de droite
  const x1 = 300;
  const x2 = 700;
  const y1 = 200;
  var canvas = document.getElementById('moncanevas');
  var context = canvas.getContext('2d');

pour ne pas les laisser dans la fonction drawLine et les réinterpréter à chaque appel de celle-ci.

Tout à fait ! Il est même intéressant de déplacer les instructions de « réglage » du canevas à l’extérieur de la fonction, car elles ne changent jamais. Je pense que le meilleur endroit où les mettre est dans la fonction d’initialisation ; mais du coup il faut passer canvas ou context (l’un permet d’avoir l’autre) en paramètre à drawLine().

@Goups, une petite remarque sur ton instruction var y2 = pente;. Une coordonnée y et une pente, ce n’est pas la même chose au sens mathématique, donc le nom pente est trompeur, tu devrais donner un autre nom à cette variable.

Et au fait, l’inversion de l’axe y ne t’a pas dérangé ?

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
"use strict";
 
// Constantes de l’équation de droite
const x1 = 300;
const x2 = 700;
const y1 = 200;
 
// Tracé de la droite
function drawLine(pasPente, context) {
  var canvas = context.canvas;
  context.clearRect(0, 0, canvas.width, canvas.height);
 
  var y2 = pasPente;
 
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
}
 
// Fonction appelée au chargement de la page
$(function () {
  var canvas = document.getElementById('moncanevas');
  var context = canvas.getContext('2d');
 
  // Caractéristique de la droite
  context.strokeStyle = 'green';
  context.lineCap = 'round';
  context.lineWidth = 4;
 
  $('#champ').after('<output></output>');
 
  $('#champ').on('input', function () {
    var value = $(this).val();
    $('output').text(value);
    drawLine(value, context);
  });
 
  // Premier appel, on passe une valeur par défaut
  drawLine(10, context);
});

**Goups** · 02/06/2019, 16h10

Re,

Concernant l'inversion de pente ... elle me va très bien car en fait c'est une pente "à coef négatif" qu'il faut afficher : c'est pour tracer pour une pente de régulation pour des chaudières ... et dans le langage des chauffagistes on utilise le mot pente (en positif pour le résultat d'une opération qui est négatif).

Bref pour essayer d'expliquer ce que je veux faire (fait déjà avec Excel avec des macros)

Il me faut tracer une pente de régulation en fonction ...
des paramètres entrés dans la chaudière : pente, pied de pente , compensation, températures mini et maxi, type de chauffage (haute ou basse température), régulation par sonde extérieure et/ou sonde d'ambiance.
des paramètres externes : température extérieure, température de consigne et température mesurée.

donc au final ... 2 cases à cochées et 8 curseurs

pour faire varier une droite (en pente), deux droites horizontales (maxi mini) et 1 point (le résultat final) qui se promène sur la droite (en pente).

le tout sur un "fond" ou "quadrillage" ayant en abscisse des températures allant de +20°C à -20°C et en ordonnée des températures allant de +20°C à +85°C.

Maintenant sur le fond le tracé de la pente est parfait comme vous me l'avez détaillé, il me reste à ajouter des curseurs pour faire "bouger" les autres points et superposer le tout sur une grille (à moins que je puisse la positionner en background)

**NoSmoking** · 02/06/2019, 16h50

Envoyé par Goups

maintenant , il va me rester deux pb
1 pour bien faire il me faudrait un rectangle à l'arrière plan qui pour l'instant s'efface ou qui se mets au dessus quand je lui donnes un autre id de "canvas" ... il faut que j'arrives à les superposer.

Effectivement il est inutile de redessiner le fond pour améliorer la gestion de l'ensemble, cela se fait très facilement en jouant avec la position des éléments, exemple :

Code html :

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

1
2
3
4
<section class="canvas-groupe">
    <canvas id="canvas-fond" width="1000" height="220"></canvas>
    <canvas id="canvas-courbe" width="1000" height="220"></canvas>
</section>

avec un CSS dans ce style

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.canvas-groupe {
  position: relative;   /* pour servir de référent */
}
#canvas-fond {
  position: absolute;
  top: 0;
  left: 0;
}
#canvas-courbe {
  position: relative;
}

d'autres combinaison sont possibles.

Il te suffit de créer ton quadrillage en utilisant le canvas qui convient.

**Goups** · 02/06/2019, 17h18

Mieux y'a pas

que dire d'autre de vos conseils à tous les deux.

donc pour l'instant nous en sommes ici :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Faire varier une droite</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<!-- curseur -->
<form action="input-type-range-min-max.php" method="post">
  <input type="range" id="champ" name="range" value="50" min="-100" max="110" step="5" />
</form>
<style type="text/css">.canvasgroupe {
  position: relative;   /* pour servir de référent */
}
#canvasfond {
  position: absolute;
  top: 0;
  left: 0;
}
#canvascourbe {
  position: relative;
}</style>
<section class="canvasgroupe">
    <canvas id="canvasfond" width="1000" height="400"></canvas>
    <canvas id="canvascourbe" width="1000" height="400"></canvas>
</section> 
<script type="text/javascript">
  function rectangle()
        {
        var canvas = document.getElementById("canvasfond"); 
        var context = canvas.getContext("2d");
        context.beginPath();
        context.strokeStyle="blue"; 
        context.lineWidth="2"; 
        context.rect(299,0,500,300);
        context.fillStyle="yellow";
        context.fill();
        context.stroke();
        }
rectangle();
"use strict";
 
// Constantes de l’équation de droite
const x1 = 300;
const x2 = 798;
const y1 = 250;
 
// Tracé de la droite
function drawLine(pasPente, context) {
  var canvas = context.canvascourbe;
 context.clearRect(0, 0, canvascourbe.width, canvascourbe.height);
 
  var y2 = pasPente;
 
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
}
 
// Fonction appelée au chargement de la page
$(function () {
  var canvas = document.getElementById('canvascourbe');
  var context = canvas.getContext('2d');
 
  // Caractéristique de la droite
  context.strokeStyle = 'green';
  context.lineCap = 'round';
  context.lineWidth = 4;
 
  $('#champ').after('<output></output>');
 
  $('#champ').on('input', function () {
    var value = $(this).val();
    $('output').text(value);
    drawLine(value, context);
  });
 
  // Premier appel, on passe une valeur par défaut
  drawLine(10, context);
});
 
</script>
</body>
</html>

Il ne manque plus qu'un deuxième curseur qui ferai varier y2 par exemple de 250 à 200 et je pourrai normalement finir mon projet.

Cordialment
Goups

**Goups** · 02/06/2019, 18h26

Il me vient une question (de plus)
j'arrive à créer deux curseurs différents affichant des valeurs différentes :

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
<HTML>
<!-- curseur --> 
<form action="input-type-range-min-max.php" method="post">
<input type="range" id="champ" name="range" value="10" min="0" max="100" step="10">
<input type="range" id="champ2" name="range" value="10" min="20" max="60" 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 champ1
$(function()
        { 
        $("#champ").after('<output></output>');
        $("#champ").live('change', function()
                { var y2 = $(this).val(); $('output').text(y2); } ); 
        }); 
 
// affichage de la variable champ2
$(function()
        { 
        $("#champ2").after('<output2></output2>');
        $("#champ2").live('change', function()
                { var y1 = $(this).val(); $('output2').text(y1); } ); 
        }); 
</script>
</html>

Mais je n'arrive pas à l'insérer dans le code (du message précédent) car je ne vois pas le lien pour donner à y1 la valeur du champ2

bref pour l'instant je sèche
Cordialement
Goups

**Watilin** · 03/06/2019, 14h11

Envoyé par Goups

donc pour l'instant nous en sommes ici :

Attention, plusieurs erreurs dans ce code :

la déclaration "use strict" doit être la première ligne du script (sans compter les commentaires), sinon le mode strict n’est pas activé !

dans ces deux lignes :

Code :

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

1
2
var canvas = context.canvascourbe;
 context.clearRect(0, 0, canvascourbe.width, canvascourbe.height);

context a toujours une propriété canvas, le nom ne change pas, même si le canevas n’est pas le même. À la ligne suivante, JavaScript voit canvascourbe comme une variable non déclarée, et lève une exception. Tu peux réécrire ce passage comme ceci :

Code :

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

1
2
var canvascourbe = context.canvas;
context.clearRect(0, 0, canvascourbe.width, canvascourbe.height);

Envoyé par Goups

Il me vient une question (de plus)

Où sont passés jQuery 3.4.1, la méthode .on() et l’évènement 'input' ?
C’est comme si nos conseils comptaient pour du beurre, c’est un peu vexant.

Mais bref. Pour pouvoir faire varier deux paramètres au lieu d’un seul, il faut pouvoir passer les deux en paramètre à drawLine(). y1 ne peut plus être une constante, il faut donc retirer la déclaration const y1 = ....

Il y a au moins deux façons de faire. La première, c’est de rendre y1 et y2 globales :

(Note, j’ai également rajouté quelques détails pour gérer les contextes des deux canevas, celui du fond et celui de la courbe.)

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
'use strict';
 
// Variables globales
var y1 = 250;
var y2 = 10;
 
// Constantes
const x1 = ... ;
const x2 = ... ;
 
function rectangle(context) {
  context.beginPath();
  context.rect(299, 0, 500, 300);
  context.fill();
  context.stroke();
}
 
function drawLine(context) { // drawLine n’a plus qu’un seul paramètre
  ...
  // drawLine utilise les variables globales y1 et y2
}
 
// Fonction appelée au chargement de la page
$(function () {
  var canvasCourbe = document.getElementById('canvascourbe');
  var contextCourbe = canvasCourbe.getContext('2d');
 
  var canvasFond = document.getElementById('canvasfond');
  var contextFond = canvasFond.getContext('2d');
 
  // initialisation des contextes : strokeStyle, lineWidth, etc.
  contextFond.strokeStyle = 'blue';
  contextFond.lineWidth = '2';
  contextFond.fillStyle = 'yellow';
 
  contextCourbe.strokeStyle = 'green';
  contextCourbe.lineCap = 'round';
  contextCourbe.lineWidth = '4';
 
  $('#champ').after('<output class="y2"></output>');
  $('#champ').on('input', function () {
    y2 = $(this).val(); // on omet var ici
    $('output.y2').text(y2);
    drawLine(contextCourbe);
  });
 
  $('#champ2').after('<output class="y1"></output>');
  $('#champ2').on('input', function () {
    y1 = $(this).val(); // on omet var ici
    $('output.y1').text(y1);
    drawLine(contextCourbe);
  });
 
  // premier appel
  rectangle(contextFond);
  drawLine(contextCourbe);
});

Mais, tu l’as peut-être lu ou entendu à plusieurs reprises, les variables globales, il vaut mieux éviter. On préfère en général qu’une fonction n’ait besoin que de ce qui lui est passé en paramètre, ça rend la maintenance du code plus facile.

Donc, comme seconde solution, voici ce que je propose : les variables y1 et y2 seront locales à la fonction de chargement de la page (la fonction $(function () { ... }). J’en profite pour dire qu’il vaut mieux n’avoir qu’une seule fonction de cette sorte, même si ça marche quand on en met plusieurs comme tu as fait.
Les deux fonctions .on('input', ...) utiliseront y1 et y2, et les passeront en paramètre à drawLine(). On a alors une fonction à trois paramètres : drawLine(y1, y2, context).

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
'use strict';
 
// Constantes
const x1 = ... ;
const x2 = ... ;
 
function rectangle(context) {
  ...
}
 
function drawLine(y1, y2, context) {
  ...
}
 
// Fonction appelée au chargement de la page
$(function () {
  var canvasCourbe = document.getElementById('canvascourbe');
  var contextCourbe = canvasCourbe.getContext('2d');
 
  var canvasFond = document.getElementById('canvasfond');
  var contextFond = canvasFond.getContext('2d');
 
  // initialisation des contextes : strokeStyle, lineWidth, etc.
  contextFond.strokeStyle = 'blue';
  contextFond.lineWidth = '2';
  contextFond.fillStyle = 'yellow';
 
  contextCourbe.strokeStyle = 'green';
  contextCourbe.lineCap = 'round';
  contextCourbe.lineWidth = '4';
 
  // variables locales
  var y1 = 250;
  var y2 = 10;
 
  $('#champ').after('<output class="y2"></output>');
  $('#champ').on('input', function () {
    y2 = $(this).val(); // on omet var ici
    $('output.y2').text(y2);
    drawLine(y1, y2, contextCourbe);
  });
 
  $('#champ2').after('<output class="y1"></output>');
  $('#champ2').on('input', function () {
    y1 = $(this).val(); // on omet var ici
    $('output.y1').text(y1);
    drawLine(y1, y2, contextCourbe);
  });
 
  // premier appel
  rectangle(contextFond);
  drawLine(y1, y2, contextCourbe);
});

**Goups** · 03/06/2019, 21h06

Bonsoir,

Je vais essayer de répondre point par point : (si il s'agit du message de hier 17H18)

la déclaration "use strict" doit être la première ligne du script (sans compter les commentaires), sinon le mode strict n’est pas activé !

Certes ... j'ai loupé ça ...

var canvascourbe = context.canvas;

j'ai en effet inversé quand j'ai écris courbe (ça tient plus de la faute de frappe).

Où sont passés jQuery 3.4.1, la méthode .on() et l’évènement 'input' ?
C’est comme si nos conseils comptaient pour du beurre, c’est un peu vexant.

Honnêtement Il me semble que
jQuery 3.4.1 est à la ligne 6
la méthode .on() et l’évènement 'input' j'ai positionné à la ligne 75 vos conseils du message de 12H04.

J'essaye seulement de comprendre ce que vous me transmettez et de l'adapter à mes besoins. Avec forcement un risque d'erreur malgré me efforts ....

Il est vrai que je ne suis pas sur d'avoir tout compris, (c'est même certain) et cette semaine étant en déplacement avec un PC dont l'écran fait 24 cm de large ... je ne vais même pas pouvoir essayer vos conseils de ce jour.
Je pense que je vais lire , relire et re re lire les tutoriels du site sur le javascript cela me mettra certainement les idées en place.
je vous recontacte quand je serai prêt
Cordialement
Goups

**NoSmoking** · 04/06/2019, 10h30

Il me semble qu'il serait intéressant à ce stade de passer par un objet regroupant tes différentes variables, cela apporterait de la clarté à ton code, par exemple :

Code :

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

1
2
3
4
5
6
7
const Courbe = {
  "y1": 200,
  "y2": 200,
  "x1": 300,
  "x2": 700,
  "pente": 0
};

et d'utiliser celui-ci dans ta fonction draw(), l'approche devient un peu différente mais pas trop quand même.

Concernant la gestion des curseurs je verrais assez bien quelque chose comme

Code :

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

1
2
3
4
5
6
7
$("#champ").after('<output></output>');
$("#champ").on('input', function () {  
  const valeur = $(this).val();
  Courbe.pente = valeur;
  $(this).next().text(valeur);
  drawLine(Courbe);
});

voilà pour un instant de réflexion

**Goups** · 08/06/2019, 10h03

Bonjour,
dans un premier temps je viens d'appliquer les conseils de Watilin
et j'arrives à :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Faire varier une droite</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<!-- curseur -->
<form action="input-type-range-min-max.php" method="post">
<input type="range" id="champ1" name="range" value="50" min="-100" max="110" step="5" />
 <p>Pente</p>
<input type="range" id="champ3" name="range2" value="0" min="-20" max="20" step="1" />
 <p>Décalage parallèle</p>
 
</form>
<style type="text/css">.canvasgroupe {
  position: relative;   /* pour servir de référent */
}
#canvasfond {
  position: absolute;
  top: 0;
  left: 0;
}
#canvascourbe1 {
  position: relative;
}
</style>
<section class="canvasgroupe">
    <canvas id="canvasfond" width="1000" height="400"></canvas>
    <canvas id="canvascourbe1" width="1000" height="400"></canvas>
 
</section> 
<script type="text/javascript">
'use strict';
 
// Constantes
const x1 = 300;
const x2 = 798;
 
function rectangle(context) {
  var canvas = document.getElementById("canvasfond"); 
  var context = canvas.getContext("2d");
  context.beginPath();
  context.strokeStyle="blue"; 
  context.lineWidth="2"; 
  context.rect(299,0,500,300);
  context.fillStyle="yellow";
  context.fill();
  context.stroke();
}
 
function drawLine1(y1, y2, context) {
  var canvascourbe1 = context.canvas;
  context.clearRect(0, 0, canvascourbe1.width, canvascourbe1.height);
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
}
 
// Fonction appelée au chargement de la page
$(function () {
  var canvasCourbe1 = document.getElementById('canvascourbe1');
  var contextCourbe1 = canvasCourbe1.getContext('2d');
 
  var canvasFond = document.getElementById('canvasfond');
  var contextFond = canvasFond.getContext('2d');
 
  // initialisation des contextes : strokeStyle, lineWidth, etc.
  contextFond.strokeStyle = 'blue';
  contextFond.lineWidth = '2';
  contextFond.fillStyle = 'yellow';
 
  contextCourbe1.strokeStyle = 'red';
  contextCourbe1.lineCap = 'round';
  contextCourbe1.lineWidth = '4';
 
    // variables locales
  var a1 = 0;
  var y1 = 200;
  var y2 = 10;
  
  $('#champ1').after('<output class="y2"></output>');
  $('#champ1').on('input', function () {
    y2 = $(this).val(); // on omet var ici
    $('output.y2').text(y2);
    drawLine1(y1, y2, contextCourbe1);
  });
 
  $('#champ3').after('<output class="a1"></output>');
  $('#champ3').on('input', function () {
    a1 = $(this).val(); // on omet var ici
    $('output.a1').text(a1);
    drawLine1(y1-a1, y2-a1, contextCourbe1);
  });
 
  // premier appel
  rectangle(contextFond);
  drawLine1(y1, y2, contextCourbe1);  
  });
</script>
</body>
</html>

Je suis certain qu'il reste encore des erreurs
mais (du moins en apparence) ça affiche le résultat espéré.
J'ai numéroté drawline et courbe car il va ensuite falloir afficher une deuxième ... puis une troisième droite dans le même rectangle ...
et bien sur je butte encore sur quelque chose ... mais je vais chercher encore...
peut-être que la solution est dans les conseils de NoSmoking
Cordialement
Goups

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

JavaScript

Discussions similaires

Partager

Partager