placement de dessins grâce à un gridBagLayout

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Je suis en train de créer un jeu de dés à 6 faces qui se joue avec 5 dés.

Je rencontre un problème au sujet de la dispositions des dés sur un JPanel équipé d'un GridBagLayout.

En effet, j'ai créé six classes (extends JPanel) représentants six dessins de dés (une classe pour chaque face) que je voudrais disposer de façon symétrique dans un JPanel équipé d'un GridBagLayout.

Pour l'instant je les affiche en dur mais au final ce sera une classe Controleur qui donnera l'ordre d'afficher un dé selon les phases de jeu.

J'ai des difficultés à manipuler ce layout et je n'obtiens pas le résultat que je souhaite (voir photo à la fin de ce post).
Je souhaite avoir les dés disposés symétriquement avec trois dés en haut et deux dés en bas (comme un W ...).

Voici mes classes depuis le JFrame jusqu'aux classes des dés (la classe DessinDe6 ne sert pas mais elle servira à afficher le résultat d'un dé qui aura fait un "6") :

Classe Fenetre :

Code:

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
 
public class Fenetre extends JFrame{
	public Fenetre() {
		super("Jeu de dés");
 
		WindowListener l = new WindowAdapter() {
			public void windowClosing(WindowEvent e) {
				System.exit(0);
			}
		};
		addWindowListener(l);
 
		this.setExtendedState(JFrame.MAXIMIZED_BOTH);
		this.setVisible(true);
 
		JPanel panneau = new JPanel(new BorderLayout());
 
		PanneauJoueurs pj = new PanneauJoueurs();
		PanneauCommandes pc = new PanneauCommandes();
		PanneauScore ps = new PanneauScore();
		PanneauDes pd = new PanneauDes();
 
		panneau.add(ps, BorderLayout.EAST);
		panneau.add(pj, BorderLayout.NORTH);
		panneau.add(pd, BorderLayout.CENTER);
		panneau.add(pc, BorderLayout.SOUTH);
 
		this.setContentPane(panneau);
	}
}

Classe PanneauJoueurs :

Code:

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
public class PanneauJoueurs extends JPanel {
	public PanneauJoueurs() {
		super();
 
		this.setLayout(new FlowLayout());
 
		JLabel labelJoueur1 = new JLabel("Louis");
		JLabel labelJoueur2 = new JLabel("Lilie");
		JLabel labelJoueur3 = new JLabel("Papa");
 
		labelJoueur1.setBackground(Color.YELLOW);
		labelJoueur1.setForeground(Color.BLUE);
		labelJoueur1.setOpaque(true);
		labelJoueur1.setBorder(new LabelsRoundedBorder(Color.BLACK, 20));
 
		labelJoueur2.setBackground(Color.LIGHT_GRAY);
		labelJoueur2.setForeground(Color.BLACK);
		labelJoueur2.setOpaque(true);
		labelJoueur2.setBorder(new LabelsRoundedBorder(Color.BLACK, 20));
 
		labelJoueur3.setBackground(Color.LIGHT_GRAY);
		labelJoueur3.setForeground(Color.BLACK);
		labelJoueur3.setOpaque(true);
		labelJoueur3.setBorder(new LabelsRoundedBorder(Color.BLACK, 20));
 
		this.add(labelJoueur1);
		this.add(labelJoueur2);
		this.add(labelJoueur3);
	}
}

Classe PanneauScore :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class PanneauScore extends JPanel {
	public PanneauScore() {
		super();
 
		int score1 = 5000;
		int score2 = 3550;
 
		JLabel joueur1 = new JLabel("Louis = " + score1);
		JLabel joueur2 = new JLabel("Lilie = " + score2);
		this.add(joueur1);
		this.add(joueur2);
 
		this.setLayout (new BoxLayout (this, BoxLayout.Y_AXIS)); 
	}
}

Classe PanneauCommandes :

Code:

1
2
3
4
5
6
7
8
9
public class PanneauCommandes extends JPanel {
	public PanneauCommandes() {
		super(new FlowLayout());
 
		JButton button = new JButton("Lancer les dés");
 
		this.add(button);
	}
}

Classe PanneauDes :

Code:

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
public class PanneauDes extends JPanel {
 
 
	public PanneauDes() {
		super(new GridBagLayout());
 
		GridBagConstraints c = new GridBagConstraints();
 
		DessinDes1 dd1 = new DessinDes1(Color.MAGENTA);
		DessinDes2 dd2 = new DessinDes2();
		DessinDes3 dd3 = new DessinDes3();
		DessinDes4 dd4 = new DessinDes4();
		DessinDes5 dd5 = new DessinDes5();
		DessinDes6 dd6 = new DessinDes6();
 
 
		//dé1
		c.fill = GridBagConstraints.HORIZONTAL;
		c.insets = new Insets(0, 0, 0, 0);
		c.gridwidth = 2;
		c.gridx = 0;
		c.gridy = 0;
		this.add(dd1, c);
 
		//dé2
		c.fill = GridBagConstraints.HORIZONTAL;
		c.insets = new Insets(0, 0, 0, 0);
		c.gridwidth = 2;
		c.gridx = 2;
		c.gridy = 0;
		this.add(dd2, c);
 
		//dé3
		c.fill = GridBagConstraints.HORIZONTAL;
		c.gridwidth = 2;
		c.gridx = 4;
		c.gridy = 0;
		this.add(dd3, c);
 
		//dé4		
		c.fill = GridBagConstraints.HORIZONTAL;
		c.insets = new Insets(100, 50, 0, 100);
		c.gridwidth = 3;
		c.gridx = 1;
		c.gridy = 1;
		this.add(dd4, c);
 
		//dé5
		c.fill = GridBagConstraints.HORIZONTAL;
		c.insets = new Insets(100, 0, 0, 0);
		c.gridwidth = 3;
		c.gridx = 3;
		c.gridy = 1;
		this.add(dd5, c);
	}
}

Classe DessinDe1 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class DessinDes1 extends JPanel {
 
	Color pointsCoul = null;
 
	public DessinDes1(Color _pointsCoul) {
		super();
		this.setPreferredSize(new Dimension(100, 100));
		this.pointsCoul = _pointsCoul;
	}
 
	@Override
    public void paint(Graphics g) {
        super.paint(g);
        g.setColor(Color.RED);
        g.fillRect(0, 0, 80, 80);
        g.setColor(Color.GREEN);
        g.drawRect(0, 0, 80, 80);
        //Dé 1
        g.setColor(pointsCoul);
        g.fillOval(33, 33, 15, 15);
    }
 
}

Classe DessinDe2 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class DessinDes2 extends JPanel {
	public DessinDes2() {
		super();
		this.setPreferredSize(new Dimension(100, 100));
	}
 
	@Override
    public void paint(Graphics g) {
        super.paint(g);
        g.setColor(Color.RED);
        g.fillRect(0, 0, 80, 80);
        g.setColor(Color.GREEN);
        g.drawRect(0,0,80,80);
        //Dé 2
        g.setColor(Color.BLUE);
        g.fillOval(55, 10, 15, 15);
        g.fillOval(10, 55, 15, 15);
    }
 
}

Classe DessinDe3 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class DessinDes3 extends JPanel {
	public DessinDes3() {
		super();
		this.setPreferredSize(new Dimension(100, 100));
	}
 
	@Override
    public void paint(Graphics g) {
        super.paint(g);
        g.setColor(Color.RED);
        g.fillRect(0, 0, 80, 80);
        g.setColor(Color.GREEN);
        g.drawRect(0,0,80,80);
        //Dé 3
        g.setColor(Color.BLUE);
        g.fillOval(55, 10, 15, 15);
        g.fillOval(33, 33, 15, 15);
        g.fillOval(10, 55, 15, 15);
    }
 
}

Classe DessinDe4 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class DessinDes4 extends JPanel {
	public DessinDes4() {
		super();
		this.setPreferredSize(new Dimension(100, 100));
	}
 
	@Override
    public void paint(Graphics g) {
        super.paint(g);
        g.setColor(Color.RED);
        g.fillRect(0, 0, 80, 80);
        g.setColor(Color.GREEN);
        g.drawRect(0,0,80,80);
        //Dé 5
        g.setColor(Color.BLUE);
        g.fillOval(10, 10, 15, 15);
        g.fillOval(55, 10, 15, 15);
        g.fillOval(10, 55, 15, 15);
        g.fillOval(55, 55, 15, 15);
    }
 
}

Classe DessinDe5 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class DessinDes5 extends JPanel {
	public DessinDes5() {
		super();
		this.setPreferredSize(new Dimension(100, 100));
	}
 
	@Override
    public void paint(Graphics g) {
        super.paint(g);
        g.setColor(Color.RED);
        g.fillRect(0, 0, 80, 80);
        g.setColor(Color.GREEN);
        g.drawRect(0,0,80,80);
        //Dé 5
        g.setColor(Color.BLUE);
        g.fillOval(10, 10, 15, 15);
        g.fillOval(55, 10, 15, 15);
        g.fillOval(33, 33, 15, 15);
        g.fillOval(10, 55, 15, 15);
        g.fillOval(55, 55, 15, 15);
    }
}

Classe DessinDe6 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class DessinDes6 extends JPanel {
	public DessinDes6() {
		super();
		this.setPreferredSize(new Dimension(100, 100));
	}
 
	@Override
    public void paint(Graphics g) {
        super.paint(g);
        g.setColor(Color.RED);
        g.fillRect(0, 0, 80, 80);
        g.setColor(Color.GREEN);
        g.drawRect(0,0,80,80);
        //Dé 6
        g.setColor(Color.BLUE);
        g.fillOval(10, 10, 15, 15);
        g.fillOval(55, 10, 15, 15);
        g.fillOval(10, 33, 15, 15);
        g.fillOval(55, 33, 15, 15);
        g.fillOval(10, 55, 15, 15);
        g.fillOval(55, 55, 15, 15);
    }
 
}

Classe LabelsRoundedBorder :

Code:

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
public class LabelsRoundedBorder extends AbstractBorder {
 
    private final Color color;
    private final int gap;
 
    public LabelsRoundedBorder(Color c, int g) {
        color = c;
        gap = g;
    }
 
    @Override
    public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
    	Graphics2D g2d = (Graphics2D) g.create();
        g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
        g2d.setRenderingHint(RenderingHints.KEY_DITHERING, RenderingHints.VALUE_DITHER_ENABLE);
        g2d.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
        g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
        g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
        g2d.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);
        g2d.setColor(color);
        g2d.draw(new RoundRectangle2D.Double(x + 1, y + 1, width - 2, height - 2, gap, gap));
        g2d.dispose();
    }
 
    @Override
    public Insets getBorderInsets(Component c) {
        return (getBorderInsets(c, new Insets(gap, gap, gap, gap)));
    }
 
    @Override
    public Insets getBorderInsets(Component c, Insets insets) {
        insets.left = insets.top = insets.right = insets.bottom = gap / 2;
        return insets;
    }
 
    @Override
    public boolean isBorderOpaque() {
        return false;
    }
}

Copie d'écran du résultat :
Pièce jointe 627428

Je vous remercie de bien vouloir m'aider !

mon approche.

bonjour,

pour ma part, on m'a toujours dit que la répétition de code était une chose à proscrire et dans ton cas, pour faire les six dés, tu recopies presque totalement six fois la même chose dans six classes différentes.
Je te propose donc de regrouper tout cela dans une même classe, qui sera paramétrée au nombre du dé, et à la couleur que tu désires pour les points.
J'ai fait cela rapidement sa tester, pour te donner une idée :
Code:

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 import java.awt.Color; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import javax.swing.JComponent; public class DéGénérique extends JComponent { // propriétés private Color clrPoint = Color.blue; private int nb = 1; //constructeur public DéGénérique( int nb, Color clrPoint) { // rajouter int x et int y si affectation de la position, VOIR DANS LE COMMENTAIRE super(); this.nb = nb; this.clrPoint = clrPoint; this.setSize(100, 100); //this.setLocation(x, y); A VOIR DANS LE COMMENTAIRE } // Dessin @Override public void paintComponent(Graphics g) { // passage du contexte graphique super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; // dessin de la partie commune à tous les dés g.setColor(Color.RED); g.fillRect(0, 0, 80, 80); g.setColor(Color.GREEN); g.drawRect(0,0,80,80); // choix de la couleur pour les points g.setColor(clrPoint); // finalisation du dessin pour la valeur 1 if (nb==1) { g.fillOval(33, 33, 15, 15); } // finalisation du dessin pour la valeur 2 if (nb==2) { g.fillOval(55, 10, 15, 15); g.fillOval(10, 55, 15, 15); } // finalisation du dessin pour la valeur 3 if (nb==3) { g.fillOval(55, 10, 15, 15); g.fillOval(33, 33, 15, 15); g.fillOval(10, 55, 15, 15); } // finalisation du dessin pour la valeur 4 if (nb==4) { g.fillOval(10, 10, 15, 15); g.fillOval(55, 10, 15, 15); g.fillOval(10, 55, 15, 15); g.fillOval(55, 55, 15, 15); } // finalisation du dessin pour la valeur 5 if (nb==5) { g.fillOval(10, 10, 15, 15); g.fillOval(55, 10, 15, 15); g.fillOval(33, 33, 15, 15); g.fillOval(10, 55, 15, 15); g.fillOval(55, 55, 15, 15); } // finalisation du dessin pour la valeur 6 if (nb==6) { g.fillOval(10, 10, 15, 15); g.fillOval(55, 10, 15, 15); g.fillOval(10, 33, 15, 15); g.fillOval(55, 33, 15, 15); g.fillOval(10, 55, 15, 15); g.fillOval(55, 55, 15, 15); } } // fin du constructeur de dé } // fin de la classe DéGénérique
Il me semble que cette peut encore être condensée, mais ca me parait déjà mieux, pour comprendre et pour modifier en une seule fois si besoin.

Pour l'alignement, j'ai choisi de partir sur des "component" et non des "panel". Cela me permet un dimensionnement et surtout une position dans mon conteneur plus facile.
Je laisserais tomber les layout en partant sur des coordonnées absolues en pixels.
En effet, un gridLayout n'est pas facile à manipuler, d'autant plus pour une mise en place avec deux éléments sur une ligne, et trois sur l'autre : le coté pair-impair rajoute une difficulté.

Il est simple de calculer les écarts . En effet pour la largeur par exemple, tu enlève à la largeur du conteneur support, la largeur occupée par les dés sur cette ligne : 100pixels* nb de dé sur la ligne.
Le nombre d'espace pour être "symétrique est égale au nombre de dés sur la ligne + 1 ;
La largeur d'un écart sera de "l(argeur totale - largeur occupée par les dés) / (nb+1)

L'intérêt des "Component apparait ici. En effet tu peux facilement pour chaque dé, déterminer sa position en x et y pour être joliment positionné et tu n'as qu'à lui affecté ses valeurs, en les rajoutant dans le constructeur par exemple, passées en paramètres. (voir code proposé).

18/10/2022, 10h08
francky74

Belles idées

Bonjour,

De belles idées ! je vais essayer tout ceci et je retourne un message pour la conclusion.
Je n'avais jamais utilisé un JComponent comme cela. En fait, un JPanel est un component mais là on créer carrément un composant customisé ?

;)
18/10/2022, 10h41
patdu26

précisions...

Si tu tapes sur googleimage "hierarchie de classe java", tu verras l'arbre des constructions de classe.
La classe de base est "objet", puis en descendant l'arbre, les classes filles héritent de toutes le propriétés de la classe objet, et au fur et à mesure, en obtiennent de nouvelles qui s'ajoutent aux propriétés mères.
C'est le principe de la "spécialisation". Les objets fils se spécialisent peu à peu au fur à mesure que l'on descend l'arbre de naissance si je puis dire..;

On voit que JPanel, hérite de JComponent. En fait JPanel est une extension de JComponent, qui se spécialise dans le positionnement d'objet par exemple, et c'est pour cela qu'il a toute cette proposition de layout, que n'a pas à JComponent. Ca peut être un désavantage ou un avantage, CA dépend de ton souhait.

Par exemple dans ton cas, si tu souhaites positionner tes dés sur un JComponent, qui te sert de support, pas de problème particulier, pour recevoir les coordonnées des dés par exemples et les positionnér.

Par contre, si tu positionnes tes dés dans un JPANEL, attention! Un JPanel qui est plus spécialisé et gère donc les layouts, a justement un layout par défaut qui est je crois "FlowLayout". Si tu veux que ton positionnement par coordonnées de pixels
fonctionne, il faudra d'abord dire au JPanel, d'abandonner le layout par défaut, pour ne plus en avoir! "setLayout (null)". Dans ce cas, il se servira des coordonnées x, y pour le positionnement dans lui-même.

Effectivement un composant peut étendre un composant, qui lui même étend un autre composant, etc....
C'est ça qui est génial. Quand tu fais plein de composants de structures proches que tu spécialises peu à peu, il ne faut surtout pas partir dans tous les sens. Tu recenses ce qui est commun à tous tes composants, et tu l'écris dans une classe qui étend JComponent.
Au niveau suivant, tu peux faire un "aiguillage" avec d'autres classes qui regroupent des composants qui ont des parties communes, et tu créés des classes qui héritent de la première et qui se spécialisent peu à peu, jusqu'à arriver à tes composants différents terminés.
Quand tu veux changer une propriété de tes composants, tu changes ou ajoutes une seule propriété dans ta hiérarchie, et tous les composants concernés seront modifiés d'un coup!
Gain de temps , d'organisation et donc moins d'erreurs...

Voila pour le moment.

Bon travail!

Bonjour,

Merci pour le temps que vous avez consacré aux explications.

Effectivement, j'ai rassemblé tous les dés en une seule classe dans laquelle je teste la condition du nombre par des switch case plutôt que des if.
Ensuite, aprés avoir dessiné les points des dés, je défini la position du dé par un setLocation.

Du coup, je peux passer aussi les arguments de location à la classe des dés.

Voici ce que cela donne :
Classe PanneauDes :

Code:

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
public class PanneauDes extends JPanel {
 
	public PanneauDes() {
		super();
 
		DessinDes dd1 = new DessinDes(1, Color.PINK, 100, 200);
		DessinDes dd2 = new DessinDes(2, Color.MAGENTA, 200, 500);
		DessinDes dd3 = new DessinDes(3, Color.WHITE, 100, 400);
		DessinDes dd4 = new DessinDes(4, Color.BLACK, 300, 300);
		DessinDes dd5 = new DessinDes(5, Color.BLUE, 500 , 100);
 
		//dé1
		this.add(dd1);
 
		//dé2
		this.add(dd2);
 
		//dé3
		this.add(dd3);
 
		//dé4
		this.add(dd4);
 
		//dé5
		this.add(dd5);
	}
}

Classe DessinDes :

Code:

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
public class DessinDes extends JComponent {
 
	private Color pointsCoul = null;
	private int nb = 1;
	private int pos_y = 0;
	private int pos_x = 0;
 
	public DessinDes(int _nb, Color _pointsCoul, int _pos_x, int _pos_y) {
		super();
		this.setPreferredSize(new Dimension(100, 100));
		this.pointsCoul = _pointsCoul;
		this.nb = _nb;
		this.pos_y = _pos_y;
		this.pos_x = _pos_x;
	}
 
	@Override
    public void paintComponent(Graphics g) {
		// passage du contexte graphique
		super.paintComponent(g);
		Graphics2D g2 = (Graphics2D)g;
 
        g.setColor(Color.RED);
        g.fillRect(0, 0, 80, 80);
        g.setColor(Color.GREEN);
        g.drawRect(0, 0, 80, 80);
 
        // choix de la couleur pour les points
        g.setColor(pointsCoul);
 
        switch(nb) {
	        case 1:
	        	//Dé 1
	            g.fillOval(33, 33, 15, 15);	
	            break;
	        case 2:
	            //Dé 2
	            g.fillOval(55, 10, 15, 15);
	            g.fillOval(10, 55, 15, 15);
	            break;
	        case 3:
	            //Dé 3
	            g.fillOval(55, 10, 15, 15);
	            g.fillOval(33, 33, 15, 15);
	            g.fillOval(10, 55, 15, 15);
	            break;
	        case 4:
	            //Dé 4
	            g.fillOval(10, 10, 15, 15);
	            g.fillOval(55, 10, 15, 15);
	            g.fillOval(10, 55, 15, 15);
	            g.fillOval(55, 55, 15, 15);
	            break;
	        case 5:
	            g.fillOval(10, 10, 15, 15);
	            g.fillOval(55, 10, 15, 15);
	            g.fillOval(33, 33, 15, 15);	
	            g.fillOval(10, 55, 15, 15);
	            g.fillOval(55, 55, 15, 15);
	        	break;
	        case 6:
	            //Dé 6
	            g.fillOval(10, 10, 15, 15);
	            g.fillOval(55, 10, 15, 15);
	            g.fillOval(10, 33, 15, 15);
	            g.fillOval(55, 33, 15, 15);
	            g.fillOval(10, 55, 15, 15);
	            g.fillOval(55, 55, 15, 15);
	        	break;
        }
 
		this.setLocation(pos_x, pos_y);
    }
 
}

Merci !!! :D