Discussion :

[bxdfr]

Bonjour, je cherche à créer un quadrillage sur un canvas ayant une image de fond.

Les cases font 25x20 et je veux que lorsque je clique sur une case, un texte avec les coordonnees de la case s'affiche au dessus de cette dernière.

A terme les cases ne doivent pas être visible mais pour l'exemple j'en dessine les contours.

Voici mon code:

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
var canvas = new fabric.Canvas('carte');
    canvas.selection = false;
    // taille du canvas 720x376
    var nbLigne = parseInt(376 / 20);
    var nbColonne = parseInt(720 / 25);
    console.log(nbLigne);
    console.log(nbColonne);
 
    for (ligne = 0; ligne < nbLigne-2; ligne++)
    {
        for (colonne = 0; colonne < nbColonne; colonne++)
        {
            var rect = new fabric.Rect({
                left: 8+colonne*25,
                top: 6+ligne*20,
                width: 25,
                height: 20,
                selectable: false,
                fill: 'rgba(0,0,0,0)',
                stroke: 'green',
                strokeWidth: 1
            });
            canvas.add(rect);
            rect.on('mouseup', function () {
 
                var chaine=/*"coucou";*/ligne + "x" + colonne;
                console.log(chaine);
                var texte = new fabric.Text(
                        chaine,
                        {
                            left: rect.left,
                            top: rect.top - 10,
                            fontFamily: 'Comic Sans',
                            fontSize: 10,
                            backgroundColor: 'white',
                            color: 'black'
                        }
                );
 
                canvas.add(texte);
            });
        }
    }

Les zones sont biens définies, mais le texte n'affiche toujours que les coordonnees de la derniere case au dessus de cette derniere, peut importe sur quelle case je clique, je texte des coordonnées de la derniere case s'affiche au dessus de la derniere case.

Où est mon erreur?

Merci d'avance pour vos réponses.

[NoSmoking]

Bonjour,
au moment de l’exécution de la fonction placée sur l'écouteur rect.on('mouseup', function () c'est le dernier l'objet rect crée qui est utilisé.
Tu aurais meilleur compte dans cette fonction d'utiliser le thisqui fait référence à l'objet appelant le gestionnaire d'événement.

Code :

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

1
2
3
4
5
6
7
8
9
var obj_concerne = this;
var texte = new fabric.Text(chaine, {
  left: obj_concerne.left,
  top: obj_concerne.top - 10,
  fontFamily: 'Comic Sans',
  fontSize: 10,
  backgroundColor: 'white',
  color: 'black'
}

[bxdfr]

ok, c'est bon, merci pour l'aide.