Objet graphics et boutons cliquables

**Apoplexus** · 26/03/2019, 22h21

Bonjour,
je débute dans le monde (merveilleux) du java "orienté objet" et j'ai un problème avec un petit programme, pas du tout ambitieux, et dont je ne trouve pas de solution après avoir consulté nombre de forums...

Je joins, plus bas, le code en espérant qu'une âme charitable voudra bien y jeter un œil...

J'explique mon problème : le programme est sensé afficher un carré bleu (paramétrable) quand on clique sur un bouton, et un carré rouge quand on clique sur un autre.
Le problème, c'est que le premier carré s'efface quand l'autre apparaît (et vice-versa) alors qu'il devrait rester en place ...
J'ai essayé d'enlever la ligne " super.paintComponent(); qui permet d'utiliser le constructeur par défaut de la classe mère de l'objet graphics (si j'ai bien compris), du coup les 2 carrés restent affichés, mais il y a des trucs très bizarre qui se produisent (3eme bouton qui apparaît n'importe où !! ).

Je pense que j'utilise mal la méthode repaint() sur l'objet graphics, ou bien c'est l'interface actionListener qui est mal redéfinie, je ne sais pas, j'ai tout essayé, rien n'y fait...

Voici le 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
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
106
107
108
109
110
111
112
113
114
 
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
 
 
//********** Panneau contenant l'objet graphics *************
public class Panneau extends JPanel {
  private int posX;
  private int posY;
  private String couleur;
 
 
  public void paintComponent(Graphics g){
    super.paintComponent(g);
    this.setBackground(Color.green);
 
    switch (couleur){
       	case "rouge": 
        	g.setColor(Color.RED);
        	break;
 
        	case "vert": 
        	g.setColor(Color.green);
        	break;
 
        	case "bleu": 
        	g.setColor(Color.blue);
        	break;
 
        	case "jaune": 
        	g.setColor(Color.yellow);
        	break;
 
        	case "orange":	
        	g.setColor(Color.orange);
        	break;
 
        	case "blanc": 
        	g.setColor(Color.white);
        	break;
        }
        g.fillRect(posX, posY, 20, 20); // On dessine un carré
    }
 
//---- méthode pour changer les coordonnées ----
  public void setCoord(int X, int Y) {
    this.posX = X;
    this.posY = Y;
    //repaint();
  }
 
//---- méthode pour changer la couleur ----
  public void setCoul(String coul) {
    this.couleur = coul;
  }  
}
 
//************* Fenetre *****************************
public class Fenetre extends JFrame{
  private JButton bouton1 = new JButton("b1");
  private JButton bouton2 = new JButton("b2");
  private Panneau pan = new Panneau();
 
  //Constructeur de la classe fenetre
  public Fenetre(){
    this.setTitle("Rubik");
    this.setSize(500, 500);
    this.setLocationRelativeTo(null); 
    this.setVisible(true);
    this.setAlwaysOnTop(true);
    //this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    this.setContentPane(pan); 
 
    pan.add(bouton1);
    pan.add(bouton2);
 
   //On définit des Listener pour les 2 boutons 
    bouton1.addActionListener(new Bouton1Listener());
    bouton2.addActionListener(new Bouton2Listener());
 
  }
 
 
   //Classe interne écoutant le premier bouton
  class Bouton1Listener implements ActionListener{
    //Redéfinition de la méthode actionPerformed()
    public void actionPerformed(ActionEvent arg0) {
      pan.setCoord(100,100);
      pan.setCoul("bleu");
      pan.repaint();
 
 
    }
  }
 
  //Classe interne écoutant le 2eme bouton
  class Bouton2Listener implements ActionListener{
    //Redéfinition de la méthode actionPerformed()
    public void actionPerformed(ActionEvent arg0) {
      pan.setCoord(200,200);
      pan.setCoul("rouge");
      pan.repaint();
 
    }
  }
 
}
 
 
void main(){
	Fenetre fen = new Fenetre();
 
}

Merci pour votre aide.

**bouye** · 27/03/2019, 01h33

L'appel super.paintComponent() ne doit être supprimé que par quelqu'un qui sait ce qu'il/elle fait (ex : faire un composant transparent ou translucide) et qui a pris les précautions nécessaires pour éviter l'affichage d'artefacts et autres choses déplaisantes. Cette méthode s'assure que le fond opaque du contrôle est remis en place avant que tu puisses dessiner dedans.

En AWT / Swing / Java2D il n'y a pas d’état permanent, c'est toi qui indique ce qui doit apparaître sur l’écran lors d'une réactualisation du contenu. En l’occurrence si tu prends le temps de lire le code tu te rends bien compte qu'a cause du switch tu ne peux JAMAIS avoir les 2 rectangles affiches en même temps. Donc a toi de modifier ce code pour que les 2 rectangles puissent être affiches ou non en fonction des boutons qui ont été cliqués (astuce, il va falloir introduire un autre mécanisme, genre des flags booléens, pour savoir quoi afficher).

**Apoplexus** · 27/03/2019, 09h38

Bonjour et merci pour ta réponse.

J'ai modifié le code en virant le switch (donc la couleur n'est plus paramétrable), mais le problème persiste, la carré affiché disparaît lorsque je clique sur l'autre bouton...

Je pense que l'instruction super.paintComponent(g); provoque la remise à zéro du Jpanel à chaque fois que la méthode repaint() est appelée dans les Listener des boutons. Si c'est cela la raison, le problème persistera toujours, même en utilisant des booléens dans les Listener, car il est inévitable d'appeler
la méthode repaint() pour redessiner l'objet graphics non ?

Cordialement,

**bouye** · 27/03/2019, 11h13

Il n'y a pas d'état persistant en AWT / Swing / Java2D ! Il est normal de tout redessiner à chaque fois tout comme il est normal que l'appel à super.paintComponent() réinitialise la surface. Le code précédent dessinait un seul et unique rectangle de la couleur courante actuelle. Si tu l'as à peine modifié alors ça ne change rien : soit tu dessines un seul rectangle, soit le second se dessine par dessus le premier (on a pas vu ton nouveau code donc je ne sais pas quelles modifs tu as faites).

**Apoplexus** · 27/03/2019, 16h41

Bonjour,

Je ne parviens pas à trouver un moyen d'afficher le 2^eme carré sans que le premier disparaisse...

Voici le code épuré (choix de la couleur du carré retiré).

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
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
 
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
 
 
//********** Panneau contenant l'objet graphics *************
public class Panneau extends JPanel {
  private int posX;
  private int posY;
 
 
  public void paintComponent(Graphics g){
    super.paintComponent(g);
    //this.setOpaque(false);
    this.setBackground(Color.green);
 
        g.setColor(Color.RED);
        g.fillRect(posX, posY, 20, 20); // On dessine un carré
    }
 
//---- méthode pour changer les coordonnées ----
  public void setCoord(int X, int Y) {
    this.posX = X;
    this.posY = Y;
    //repaint();
  }
}
 
 
//************* Fenetre *****************************
public class Fenetre extends JFrame{
  private JButton bouton1 = new JButton("b1");
  private JButton bouton2 = new JButton("b2");
  private Panneau pan = new Panneau();
 
  //Constructeur de la classe fenetre
  public Fenetre(){
    this.setTitle("Rubik");
    this.setSize(500, 500);
    this.setLocationRelativeTo(null); 
    this.setVisible(true);
    this.setAlwaysOnTop(true);
    //this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    this.setContentPane(pan); 
 
    pan.add(bouton1);
    pan.add(bouton2);
 
   //On définit des Listener pour les 2 boutons 
    bouton1.addActionListener(new Bouton1Listener());
    bouton2.addActionListener(new Bouton2Listener());
 
  }
 
 
   //Classe interne écoutant le premier bouton
  class Bouton1Listener implements ActionListener{
    //Redéfinition de la méthode actionPerformed()
    public void actionPerformed(ActionEvent arg0) {
      pan.setCoord(100,100);
      pan.repaint();
 
 
    }
  }
 
  //Classe interne écoutant le 2eme bouton
  class Bouton2Listener implements ActionListener{
    //Redéfinition de la méthode actionPerformed()
    public void actionPerformed(ActionEvent arg0) {
      pan.setCoord(200,200);
      pan.repaint();
 
    }
  }
 
}
 
 
void main(){
	Fenetre fen = new Fenetre();
 
}

**bouye** · 27/03/2019, 20h51

Oui mais ton code de dessin dessine un seul et unique rectangle donc c'est normal que un seul rectangle s'affiche. Essaie de comprendre que le contenu ne PERSISTE PAS entre chaque réaffichage ! Tu auras beau dessiner dans le composant, tout ce que tu as fait est totalement perdu lors du réaffichage suivant. Il te faut donc mettre du code pour dessiner les 2 rectangles.

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
boolean show1 = false;
boolean show2 = false;
 
button1.addActionListener(event -> {
    show1 = true;
    repaint();
});
button2.addActionListener(event -> {
    show2 = true;
    repaint();
});
 
public void paintComponent(Graphics g){
    super.paintComponent(g);
 
    if (show1) { 
        g.setColor(Color.RED);
        g.fillRect(0, 0, 20, 20); // On dessine un carré
    }
    if (show2) {
        g.setColor(Color.BLUE);
        g.fillRect(50, 50, 20, 20); // On dessine un carré
    }
}

**Apoplexus** · 27/03/2019, 22h03

Oui effectivement, comme ça j'ai 2 carrés, mais le but était d'automatiser l'affichage afin d'afficher, par exemple, une centaine de carrés de coordonnées variables en relançant l'objet graphics dans une boucle située dans les listeners des boutons.

Je voulais juste savoir s'il était possible de ne pas rafraîchir l'affichage précédent avec repaint(), mais apparemment c'est impossible. J'ai compris le principe, je vais donc repenser le fonctionnement du programme. La boucle en question se situera directement dans la méthode PaintComponent().

Merci de ton aide.

Cordialement,

Ap.

**bouye** · 27/03/2019, 23h40

Il existe des moyens de créer un affichage persistant, cela consiste a dessiner dans une image (BufferedImage), un buffer offscreen (tampon hors-ecran). paintComponent() ne sert alors plus qu'a dessiner cette image a l’écran. Ce que tu gagnes en persistance, tu le perds en consommation mémoire (maintenir une image de la taille de ton contrôle prend de la mémoire).

**Apoplexus** · 28/03/2019, 14h30

OK, là ça dépasse trop largement mes compétences (de débutant)...
Merci pour l'info.

Cependant, j'ai remarqué en regardant plusieurs programme sur le net, y compris sur des sites sérieux, que beaucoup n'utilisaient pas la ligne super.paintComponent(), permettant ainsi la persistance des formes précédentes dans le JPanel.

Mais, comme tu l'as dit avant, c'est une opération risquée, en effet, dans mon programme, sans cette ligne, si j'ajoute des boutons, l'affichage devient incohérent (boutons qui apparaissent n'importe où).

Merci encore.

Je joins mon code (affichage de plusieurs carrés pour chaque bouton, mais rafraîchissement de l'affichage dès qu'on appuie sur l'autre bouton) pour ceux que ça interresse.

a+

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
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
 
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
 
 
//********** Panneau contenant l'objet graphics *************
public class Panneau extends JPanel {
  private int posX;
  private int posY;
  private String couleur;
  private boolean b1=true;
  private boolean b2=false;
 
 
  public void paintComponent(Graphics g){
    super.paintComponent(g);
    this.setBackground(Color.green);
 
    switch (couleur){
       	case "rouge": 
        	g.setColor(Color.RED);
        	break;
 
        	case "vert": 
        	g.setColor(Color.green);
        	break;
 
        	case "bleu": 
        	g.setColor(Color.blue);
        	break;
 
        	case "jaune": 
        	g.setColor(Color.yellow);
        	break;
 
        	case "orange":	
        	g.setColor(Color.orange);
        	break;
 
        	case "blanc": 
        	g.setColor(Color.white);
        	break;
        }
 
    if (b1){  // On dessine des carrés qui descendent
   	 for (int i = 0; i<67; i+=11){
        g.fillRect(posX+i, posY-i, 10, 10); 
      }
   }
   if (b2){  // On dessine des carrés qui montent
   	for (int i = 0; i<67; i+=11){
        g.fillRect(posX+i, posY+i, 10, 10); 
      }
   }
 
  }
 
//---- méthode pour changer les coordonnées ----
  public void setCoord(int X, int Y) {
    this.posX = X;
    this.posY = Y;
 
  }
 
//---- méthode pour changer la couleur ----
  public void setCoul(String coul) {
    this.couleur = coul;
  }
 
  //---- méthode pour changer le boolean ----
  public void setBool() {
    this.b1 = !b1;
    this.b2 = !b2;
  }  
 
}
 
//************* Fenetre *****************************
public class Fenetre extends JFrame{
  private JButton bouton1 = new JButton("b1");
  private JButton bouton2 = new JButton("b2");
  private Panneau pan = new Panneau();
 
  //Constructeur de la classe fenetre
  public Fenetre(){
    this.setTitle("Rubik");
    this.setSize(500, 500);
    this.setLocationRelativeTo(null); 
    this.setVisible(true);
    this.setAlwaysOnTop(true);
    //this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    this.setContentPane(pan); 
 
    pan.add(bouton1);
    pan.add(bouton2);
 
   //On définit des Listener pour les 2 boutons 
    bouton1.addActionListener(new Bouton1Listener());
    bouton2.addActionListener(new Bouton2Listener());
 
  }
 
 
   //Classe interne écoutant le premier bouton
  class Bouton1Listener implements ActionListener{
    //Redéfinition de la méthode actionPerformed()
    public void actionPerformed(ActionEvent arg0) {
      pan.setCoord(100,100);
      pan.setCoul("bleu");
      pan.repaint();
      pan.setBool();
 
    }
  }
 
  //Classe interne écoutant le 2eme bouton
  class Bouton2Listener implements ActionListener{
    //Redéfinition de la méthode actionPerformed()
    public void actionPerformed(ActionEvent arg0) {
      pan.setCoord(200,200);
      pan.setCoul("rouge");
      pan.repaint();
      pan.setBool();
    }
  }
 
}
 
public static void main(String [ ] args){
 
	Fenetre fen = new Fenetre();
 
}

**bouye** · 28/03/2019, 23h32

Il n'est pas nécessaire d'invoquer super.paintComponent() quand par exemple ta première action est de dessiner une grande surface rectangulaire opaque qui va occulter toute la zone couverte par le contrôle (cela revient a faire la meme chose).

La persistance n'existe pas en AWT / Swing / Java2D et si des sites sont assez idiots pour croire que ca marche car leurs pilotes graphiques sont foires et leur font croire que le contenu est conserve entre chaque reaffichage c'est leur soucis. AWT / Swing / Java2D ne fonctionne pas comme ca !

Pour le reste :

Comment utiliser le double-buffering software ? et les 2-3 Q/R qui suivent (et aussi Comment utiliser des images compatibles pour améliorer les performances et le rendu ?). L'ennuie c'est que je ne sais pas qui a redige cette QR mais il a mélanger une partie animation avec un thread dans la réponse alors que ce n'est pas vraiment le propos de cette QR (il ne faut pas tenir compte de la partie thread et animation dans le code de la réponse)...

le but est simple :

on crée une image de la même taille que le composant (si le composant est redimensionné, il faut créer une nouvelle image aux nouvelle dimensions et recopier l'ancienne dedans)
en réaction aux boutons on dessine dans le graphics de l'image et on invoque repaint()
Dans paintComponent(), on dessine l'image dans le graphics du composant.

De ce fait l'image permet d'obtenir une persistance de ce qui a été dessiné dans son graphics a elle.

Sinon de manière plus générale pour obtenir une persistance dans passer par un buffer offscreen :

il faut conserver un historique des commandes de dessin (voir patron de conception Mémento - ce qui permet par la meme d'implementer le undo)
A chaque nouvel affichage, il faut re-rendre tout l'historique dans le graphic du composant.

Ça a le désavantage d’être long (lorsque l’historique devient trop long) ou de bouffer trop de mémoire (idem) mais c'est aussi plus flexible (on peut donc remonter dans l'historique et faire du undo)

Objet graphics et boutons cliquables

Java

Discussions similaires

Partager

Partager