Insertion image dans tableau à deux dimensions

**l'unique** · 21/09/2010, 23h24

bonjour,
je n'arrive pas à résoudre un problème que j'ai et je demande votre aide afin que vous me mettiez sur la bonne voie. J'explique mon problème:
j'ai dessiné un tableau à deux dimension (4 lignes et 7 colonnes) dans une fenêtre à laide de de la méthode drawLine, dans chaque cases je dois mettre une image différente , cependant je ne sais pas comment faire.

**Ivelios** · 21/09/2010, 23h58

pour mettre une image utilise la méthode drawImage.
Indique la x et y (points en haut à gauche de l'image) ainsi que les dimensions.
Exemple :
Normalement tu doit avoir 28 Images (7*4).
Si toutes tes cases font la même dimension (15 pixel * 15 pixel).
Pour mettre une image dans la case (6,3) :

Code :

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

g.drawImage(MonImage, 6 * 15 , 3 * 15, 15, 15,monObserver);

javadoc
A partir de la il est facile d'imaginer une boucle pour ajouter toutes tes images.

**l'unique** · 22/09/2010, 11h42

j'ai essayer de faire comme vous m'avais dit, cependant j'ai constaté, que les images ne sont pas dans leur bonne case, et que le tableau que j'ai fait n'est pas pris en considération
de plus la taille de l'image ne correspond pas à la taille d'une case.
est ce un problème de coordonnée d'une position?

voici ma classe Panneau:

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
import javax.swing.*;
import java.awt.*;
import java.io.*;
 
 
public class Panneau extends JPanel 
{
        private Image image;
    private Image im1= (new ImageIcon(Panneau.class.getResource("images/iconeAide.png")).getImage());
    private Image im2= (new ImageIcon(Panneau.class.getResource("images/warning.png")).getImage());
    private Graphics2D g2d;
 
 
    public Panneau() 
    {
        super();
        setPreferredSize(new Dimension(500, 500));
        setLayout(new GridLayout(4,7));
 
 
    }
 
    public Dimension getPreferredSize() 
    {
        Dimension size = super.getPreferredSize();
        if (image != null) 
        {
            size.width = image.getWidth(this);
            size.height = image.getHeight(this);
        }
        return size;
    }
 
    /**
     * Efface le panneau de dessin
     * 
     */        
    public void clearPaint() 
    {
        g2d.setColor(Color.white);
        g2d.fillRect(0, 0, getWidth(), getHeight());
        repaint();
        g2d.setColor(Color.black);
    }
 
    /**
     * @param g Objet graphique permettant de dessiner
     * Definit une zone dans laquelle on va pouvoir dessiner
     */    
    public void paintComponent(final Graphics g) 
    {
        super.paintComponent(g);
        // initialises the image with the first paint
        // or checks the image size with the current panelsize
        if (image == null || image.getWidth(this) < getSize().width || image.getHeight(this) < getSize().height) 
        {
            resetImage();
        }
        Rectangle r = g.getClipBounds();
        g.drawImage(image, r.x, r.y, r.width + r.x, r.height + r.y, r.x, r.y, r.width + r.x, r.height + r.y, null);
    }
    /**
     *
     * Creer une zone, dans laquelle on va pouvoir mettre les images
     */   
    private void resetImage() 
    {
        image = createImage(getWidth(), getHeight());  
        g2d = (Graphics2D) image.getGraphics();
        g2d.setColor(Color.WHITE);
        g2d.fillRect(0, 0, getWidth(), getHeight());
        g2d.setColor(Color.BLACK);
 
        // Creation du cadre noir
        g2d.drawRect(0, 0, getWidth(), getHeight());
        // Les 7 barres noires verticales
        g2d.drawLine((int)((getWidth()*1)/7)+0,0, (int)((getWidth()*1)/7)+0,getHeight()+0);
        g2d.drawLine((int)((getWidth()*2)/7)+0,0,(int)((getWidth()*2)/7)+0, getHeight()+0);
        g2d.drawLine((int)((getWidth()*3)/7)+0,0,(int)((getWidth()*3)/7)+0, getHeight()+0);
        g2d.drawLine((int)((getWidth()*4)/7)+0,0, (int)((getWidth()*4)/7)+0,getHeight()+0);
        g2d.drawLine((int)((getWidth()*5)/7)+0,0,(int)((getWidth()*5)/7)+0, getHeight()+0);
        g2d.drawLine((int)((getWidth()*6)/7)+0,0,(int)((getWidth()*6)/7)+0, getHeight()+0);
        g2d.drawLine((int)((getWidth()*7)/7)+0,0,(int)((getWidth()*7)/7)+0, getHeight()+0);
 
        // Les 4 barres noires horizontales
        g2d.drawLine(0,(int)((getWidth()*1)/4)+0, getHeight()+0,(int)((getWidth()*1)/4)+0);
        g2d.drawLine(0,(int)((getWidth()*2)/4)+0, getHeight()+0, (int)((getWidth()*2)/4)+0);
        g2d.drawLine(0,(int)((getWidth()*3)/4)+0, getHeight()+0,(int)((getWidth()*3)/4)+0);
        g2d.drawLine(0,(int)((getWidth()*4)/4)+0, getHeight()+0, (int)((getWidth()*4)/4)+0);
 
        // teste image case (6,3)
        g2d.drawImage(im1, 6 * 15 , 3 * 15, 15, 15,this);
    }
 
 
    /**
     * @return L'objet graphique permettant le dessin
     * Getteur de l'objet graphique servant à dessiner dans le panneau
     */ 
    public Graphics2D getG2d() 
    {
        return g2d;
    }
}

**Ivelios** · 22/09/2010, 13h42

Avec le code je comprend mieux ton besoin.

En faite, tu peux faire ça de 2 manières. Dans ton cas tu as mélangé les 2 solutions possibles. ( je suis un peu responsable

).

1 : Tu as un GridLayout(4,7). Il suffit d'ajouter des JLabels à ton gridLayout. JLabel qui contiendra une image ( cf constructeur JLabel)

2 : Tu n'utilises pas de GridLayout et alors tu fais tous à la main ( dans le paintComponent(Graphics g). c'est la manière que j'ai cité plus haut.

Pour allé plus loin: Si tu veux gérer les cliques sur tes images :
pour 1/ tu remplaces les JLabel par des JButton.
pour 2/ Tu fait un mouseListener sur le panel, tu recupère les coordonées, et via un calcul mathématiques des plus compliqué ( une division

) tu retombe sur l'image.

Bref : dans ton cas j'utiliserais la méthode 1/ qui est bien plus simple et moins casse-gueule que la 2/

remarque : si tu veux des bordures noires entre les images, utilise un GridBagLayout, modifie l'Inset (bordures) et met le fond en noire

**l'unique** · 22/09/2010, 16h25

je ne sais pas si mon raisonnement est correcte? : il suffit donc que je récupère la composante X d'une position p dans une méthode par exemple private int getXforPosition(int p) et la composante Y d'une position p dans une méthode par exemple private int getYforPosition(int p) et après les utiliser dans drawImage exemple:
g2d.drawImage(im1,getXforPosition(...),getYforPosition(...),tailleImage,tailleImage,this);
pour la bonne taille de l'image faudrait-il que je fasse un calcule afin de la mettre dans la méthode drawImage?

j'ai fait ces deux méthodes, mais je ne suis pas sur que c'est les bons calcules:

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
/**
     * Recupere la composante X d'une position p
     * p Position d'une case
     *  int Coordonne X 
     */
    private int getXforPosition(int p)
    {
        int y=0;
        switch(p)
    {
            case 1:y = 0 + (int)((getHeight()*1)/7);break;
            case 2:y = 0 + (int)((getHeight()*2)/7);break;
            case 3:y = 0 + (int)((getHeight()*3)/7);break;
            case 4:y = 0 + (int)((getHeight()*4)/7);break;
            case 5:y = 0 + (int)((getHeight()*5)/7);break;
            case 6:y = 0 + (int)((getHeight()*6)/7);break;
            case 7:y = 0 + (int)((getHeight()*7)/7);break;
 
            case 8:y = 0 + (int)((getHeight()*1)/7);break;
            case 9:y = 0 + (int)((getHeight()*2)/7);break;
            case 10:y = 0 + (int)((getHeight()*3)/7);break;
            case 11:y = 0 + (int)((getHeight()*4)/7);break;
            case 12:y = 0 + (int)((getHeight()*5)/7);break;
            case 13:y = 0 + (int)((getHeight()*6)/7);break;
            case 14:y = 0 + (int)((getHeight()*7)/7);break;
 
            case 15:y = 0 + (int)((getHeight()*1)/7);break;
            case 16:y = 0 + (int)((getHeight()*2)/7);break;
            case 17:y = 0 + (int)((getHeight()*3)/7);break;
            case 18:y = 0 + (int)((getHeight()*4)/7);break;
            case 19:y = 0 + (int)((getHeight()*5)/7);break;
            case 20:y = 0 + (int)((getHeight()*6)/7);break;
            case 21:y = 0 + (int)((getHeight()*7)/7);break;
 
            case 22:y = 0 + (int)((getHeight()*1)/7);break;
            case 23:y = 0 + (int)((getHeight()*2)/7);break;
            case 24:y = 0 + (int)((getHeight()*3)/7);break;
            case 25:y = 0 + (int)((getHeight()*4)/7);break;
            case 26:y = 0 + (int)((getHeight()*5)/7);break;
            case 27:y = 0 + (int)((getHeight()*6)/7);break;
            case 28:y = 0 + (int)((getHeight()*7)/7);break;
        }
        return y;
 
    }
 
    /**
     * Recupere la composante Y d'une position p
     *  p Position d'une case
     * int Coordonne Y 
     */
    private int getYforPosition(int p)
    {
        int x=0;
        switch(p)
    {
 
            case 1:x = 0 + (int)((getWidth()*1)/4);break;
            case 2:x = 0 + (int)((getWidth()*2)/4);break;
            case 3:x = 0 + (int)((getWidth()*3)/4);break;
            case 4:x = 0 + (int)((getWidth()*4)/4);break;
 
            case 5:x = 0 + (int)((getWidth()*1)/4);break;
            case 6:x = 0 + (int)((getWidth()*2)/4);break;
            case 7:x = 0 + (int)((getWidth()*3)/4);break;
            case 8:x = 0 + (int)((getWidth()*4)/4);break;
 
            case 9:x = 0 + (int)((getWidth()*1)/4);break;
            case 10:x = 0 + (int)((getWidth()*2)/4);break;
            case 11:x = 0 + (int)((getWidth()*3)/4);break;
            case 12:x = 0 + (int)((getWidth()*4)/4);break;
 
            case 13:x = 0 + (int)((getWidth()*1)/4);break;
            case 14:x = 0 + (int)((getWidth()*2)/4);break;
            case 15:x = 0 + (int)((getWidth()*3)/4);break;
            case 16:x = 0 + (int)((getWidth()*4)/4);break;
 
            case 17:x = 0 + (int)((getWidth()*1)/4);break;
            case 18:x = 0 + (int)((getWidth()*2)/4);break;
            case 19:x = 0 + (int)((getWidth()*3)/4);break;
            case 20:x = 0 + (int)((getWidth()*4)/4);break;
 
            case 21:x = 0 + (int)((getWidth()*1)/4);break;
            case 22:x = 0 + (int)((getWidth()*2)/4);break;
            case 23:x = 0 + (int)((getWidth()*3)/4);break;
            case 24:x = 0 + (int)((getWidth()*4)/4);break;
 
            case 25:x = 0 + (int)((getWidth()*1)/4);break;
            case 26:x = 0 + (int)((getWidth()*2)/4);break;
            case 27:x = 0 + (int)((getWidth()*3)/4);break;
            case 28:x = 0 + (int)((getWidth()*4)/4);break;
 
 
        }
        return x;
    }

**Ivelios** · 22/09/2010, 19h48

WHAAOUUUU

Alors oui, tu es sur la bonne voie mais tu t'égare

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
import javax.swing.*;
import java.awt.*;
 
 
public class Panneau extends JPanel
{
 
    private Color[][] tableauDeCouleur;
 
 
    public Panneau()
    {
        super();
        setPreferredSize(new Dimension(500, 500));
        tableauDeCouleur = new Color[4][7];
 
        //initialisation du tableau de couleur
        for(int i = 0;i<4;i++){
            for(int j = 0;j<7;j++){
 
 
//On choisi au hazard rouge, blanc, vert, jaune ou bleu
 
                int hazard = (int)(Math.random()*5);
                Color c = Color.RED;
                switch(hazard) {
                    case 0: c = Color.RED; break;
                    case 1: c = Color.WHITE; break;
                    case 2: c = Color.GREEN; break;
                    case 3: c = Color.YELLOW; break;
                    case 4: c = Color.BLUE; break;
                }
                tableauDeCouleur[i][j] = c;
 
            }
        }//Fin initialisation tableau de couleur
 
 
    }
 
 
 
public void paintComponent(final Graphics g)
    {
 
        dessinerFond(g);
        dessinerBordure(g);
        dessinerInterieurDesCases(g);
 
    }
 
    private void dessinerFond(Graphics g) {
       g.setColor(Color.WHITE);
       g.fillRect(0, 0, getWidth(), getHeight());
    }
 
    private void dessinerBordure(Graphics g)
    {
 
        g.setColor(Color.BLACK);
        // Les 7 barres noires verticales
        for(int i=1;i<7;i++)
            g.drawLine((int)((getWidth()*i)/7),0, (int)((getWidth()*i)/7),getHeight());
 
        // Les 4 barres noires horizontales
        for(int i=1;i<4;i++)
            g.drawLine(0,(int)((getHeight()*i)/4), getWidth(),(int)((getHeight()*i)/4));
 
    }
 
    private void dessinerInterieurDesCases(Graphics g) {
       int largeur =(int) ((getWidth())/7);
       int hauteur =(int) ((getHeight())/4);
 
 
       for(int i = 0;i<4;i++){
            for(int j = 0;j<7;j++){        
                g.setColor(tableauDeCouleur[i][j]);
                g.fillRect((j*largeur)+1, (i*hauteur)+1, largeur-1, hauteur-1);
                //On met des +1 et -1 pour ne pas débordé sur les bordures
 
            }
        }
 
 
 
    }
 
    public static void main(String[] args){
        JFrame f = new JFrame();
        f.setContentPane(new Panneau());
        f.setVisible(true);
    }
 
}

C'est un petit programme test que j'ai fait pour que tu comprenne un peu mieux.
C'est pas commenté mais tu devrais comprendre je pense

Il pour ton programme final, il faut modifier Color[][] par Image[][], refaire l'initialisation de ton tableau.
Et modifier dessinerInterieurDesCases pour afficher des images et non des rectangles

ps : la classe est prête à être lancé. Test chez toi

**l'unique** · 22/09/2010, 23h26

j'ai quelques problèmes au niveau de l'initialisation, mon idée étais que a la place de l'entier
hazard je devais mettre le numéro de case, et après pour chaque case associée l'image correspondante, cependant je ne sais pas comment obtenir le numéro d'une case.
Au niveau de de la méthode dessinerInterieurDesCases, j'ai procéder comme sa:

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
 public Panneau()
    {
        super();
        setPreferredSize(new Dimension(500, 500));
        tableauDeImage = new Image[4][7];
 
        //initialisation du tableau d image
        for(int i = 0;i<4;i++)
        {
            for(int j = 0;j<7;j++)
            {
             Image im=(newImageIcon(Panneau.class.getResource("images/image1.png")).getImage());
        int numberCase=......;
           //On met les images dans les bonnes cases
                switch(numberCase) 
                {
                    case 0: im = (new ImageIcon(Panneau.class.getResource("images/image1.png")).getImage()); break;
                    case 1: im = (new ImageIcon(Panneau.class.getResource("images/image2.png")).getImage()); break;
            // case jusqua 28 avec differentes images
                }
                tableauDeImage[i][j] = im;
 
            }
        }//Fin initialisation tableau d image
 
 
    }
    private void dessinerInterieurDesCases(Graphics g) {
       int largeur =(int) ((getWidth())/7);
       int hauteur =(int) ((getHeight())/4);
 
 
       for(int i = 0;i<4;i++)
       {
            for(int j = 0;j<7;j++)
            {        
               g.drawImage(tableauDeImage[i][j], (i *hauteur)+1,(j*largeur)+1,largeur-1, hauteur-1,this);
                //On met des +1 et -1 pour ne pas débordé sur les bordures
 
            }
        }
 
 
 
    }

Insertion image dans tableau à deux dimensions

Java

Vue hybride

Discussions similaires

Partager

Partager