Discussion :

[lockmanz]

Bonjour,

Voici mon problème : ce que je veux faire c'est de stocker les coordonnes à chaque clique de souris dans un tableau.
Pour cela j'ai créée une classe point, le tableau contiendra un ensemble de point.

Par ailleurs, mon principal soucis provient de la fonction du addEventListener j'aimerai mettre en paramétré le tableau mais je n'y arrive pas.

voici le code 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
function position_clique_point(ev,tab) {
    var x = ev.clientX - canvas.offsetLeft;
    var y = ev.clientY - canvas.offsetTop;
    return new point2d(x,y);
}
 
window.onload = function () {
    "use strict";
    var tab=[];
    var canvas = document.getElementById('jeu');
    var ctx = canvas.getContext("2d");
    tab.push(canvas.addEventListener('click', position_clique_point, false));
 
};

Merci.

[lockmanz]

Oui mais non je ne vois pas comment stocker les points dans un tableau même par délégation.

[psychadelic]

ah ok, j'étais hors sujet.

Code JavaScript :

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
window.onload = function () {
  "use strict";
  var tab=[];
  var canvas = document.getElementById('jeu');
  var ctx = canvas.getContext("2d");
 
  canvas.addEventListener('click', position_clique_point, false);
 
  // ...
 
  function position_clique_point(ev) {
    tab.push({x: (ev.clientX - canvas.offsetLeft) ,y:(ev.clientY - canvas.offsetTop) });
 
    // ne pas négliger le fait que les objet JS ne sont pas directement copiable (il faut utiliser assign sinon)
    // donc autant le créer directement au moment du push dans le tableau
  }
};

[Beginner.]

Code JavaScript :

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
 
 
function position_clique_point(ev) {
  tab.push({x: (ev.clientX - canvas.offsetLeft) ,y:(ev.clientY - canvas.offsetTop) });
 
  // ne pas négliger le fait que les objet JS ne sont pas directement copiable (il faut utiliser assign sinon)
  // donc autant le créer directement au moment du push dans le tableau
}
 
window.onload = function () {
  "use strict";
  var tab=[];
  var canvas = document.getElementById('jeu');
  var ctx = canvas.getContext("2d");
 
  canvas.addEventListener('click', position_clique_point, false);
};

Je n'ai pas testé mais je me demande si cela ne va pas buguer car tu n'as pas passé le tableau tab en paramètre de la fonction position_clique_point(ev)...

Autre solution que le passage en paramètre : mettre tab en globale...


EDIT : Un autre problème c'est que "canvas" n'est pas défini dans la fonction position_clique_point(ev)...

Mais là ce serait dommage de le passer en variable globale si on n'en a pas besoin ailleurs alors perso j'ai ajouté : var canvas = ev.target; dans la fonction...

[CosmoKnacki]

Je n'ai pas testé mais je me demande si cela ne va pas buguer car tu n'as pas passé le tableau tab en paramètre de la fonction position_clique_point(ev)
...
EDIT : Un autre problème c'est que "canvas" n'est pas défini dans la fonction position_clique_point(ev)...

Non ça ne buguera pas car lorsque position_clique_point est exécutée, comme tab ou canvas ne sont pas déclarées dans la fonction, Javascript cherchera si ces variables existent dans le bloc où est appelée la fonction (puis dans le bloc parent, puis dans le bloc parent du bloc parent..., jusqu'à ce qu'il mette la main dessus).

Un peu de lecture sur le sujet.

[Beginner.]

@psychadelic : +1 ! Oui j'ai vu entre temps que tu avais modifié ton code...

Non ça ne buguera pas car lorsque position_clique_point est exécutée, comme tab ou canvas ne sont pas déclarées dans la fonction, Javascript cherchera si ces variables existent dans le bloc où est appelée la fonction (puis dans le bloc parent, puis dans le bloc parent du bloc parent..., jusqu'à ce qu'il mette la main dessus).

Un peu de lecture sur le sujet.

+1 ! Oui merci pour le lien et l'explication, cela me fera un rappel...

Ceci dit en fait ce que je disais concerne le premier code de psychadelic (et c'est celui-là que j'ai cité dans mon message) et toi ton explication concerne la version corrigée de son code (enfin je suppose car sinon ça ne colle pas)... Le premier bogue pour les raisons que j'ai mentionnées mais pas la version corrigée...

PS : Ceci dit si on veut avoir accès au tableau tab ailleurs dans le code il faudra faire quelque chose (perso je l'ai mis en globale, le plus simple).

[psychadelic]

Je n'ai pas testé mais je me demande si cela ne va pas buguer car tu n'as pas passé le tableau tab en paramètre de la fonction position_clique_point(ev)...

oui tu as raison, et c'est d'ailleurs la raison pour laquelle j'ai corrigé mon code

Dernière modification par psychadelic ; Aujourd'hui à 15h27. Motif: petite coquille sur la portée de variable

[Beginner.]

Salut,

Si tu tiens à passer le tableau en paramètre tu peux faire ça par exemple :

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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Model</title>
 
    <style>
        canvas {
            background-color: green;
            width: 500px;
            height: 300px;
        }
    </style>
     <script>
            window.onload = function () {
                "use strict";
                var tab = [];
                var canvas = document.getElementById('jeu');
                var ctx = canvas.getContext("2d");
    
                canvas.addEventListener('click', function (ev) {
                    position_clique_point(ev, tab);
                }, false);
            };
    
    
            function position_clique_point(ev, tab) {
    
                var canvas = ev.target;
                var x = ev.clientX - canvas.offsetLeft;
                var y = ev.clientY - canvas.offsetTop;
    
                var point2d = {x,y};    //var point2d = {x,y};    
                tab.push(point2d);    
                console.log(point2d, tab);
            }
        </script>
</head>
 
<body>
 
 
    <canvas id="jeu"></canvas>
 
 
</body>
 
</html>

J'ai modifié une partie de ton code pour que le test soit possible (car par exemple tu ne nous as pas donné la "classe point"...)...


EDIT : Mais j’anticipe un problème, dans le code précédent j'ai laissé tab en variable locale (comme c'est le cas dans le code initial) mais du coup tu n'auras pas accès à ce tableau en dehors de la fonction dans laquelle il est défini alors tu peux le mettre en variable globale et dans ce cas plus besoin de le passer en paramètre, cela donnerait ça :

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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Model</title>
 
    <style>
        canvas {
            background-color: green;
            width: 500px;
            height: 300px;
        }
    </style>
    <script>
        "use strict";
        var tab = [];
 
        window.onload = function () {
            var canvas = document.getElementById('jeu');
            var ctx = canvas.getContext("2d");
 
            canvas.addEventListener('click', function (ev) {
                position_clique_point(ev);
            }, false);
        };
 
 
        function position_clique_point(ev) {
            var canvas = ev.target;
            var x = ev.clientX - canvas.offsetLeft;
            var y = ev.clientY - canvas.offsetTop;
 
            var point2d = {
                x,
                y
            }; //var point2d = {x,y};    
            tab.push(point2d);
            console.log(point2d, tab);
        }        
    </script>
</head>
 
<body>
 
 
    <canvas id="jeu"></canvas>
 
 
</body>
 
</html>