Carte 2D avec deux calques liées en movements

**slim_java** · 20/08/2009, 14h34

Envoyé par Microbulle

Code :

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

1
2
3
 
 
        jTabbedPane1.add("Carte", scroll);

ton scroll est vide , tu la simplement placé dans le tabbed pane ,donc ,tu doit ajouter ton panneau au Scroll avec

Code :

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

1
2
3
 
 
 tonScroll.setViewportView(ton_panneau);

faut que la taille( préféré) du panneau "ton_panneau" soit plus grande que celle du tabbedPane si ton Layout est BorderLayout

**dinobogan** · 20/08/2009, 14h38

Envoyé par Microbulle

Quelqu'un aurais un élément de réponse pour sauver ce bout de code, ou faut-il tout reprendre à 0 ?

Pour cette partie du problème, je te propose te tout reprendre de zéro. Autant faire simple mais efficace.

Voici très simplement un scroll sur une image dans un onglet :

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
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
 
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTabbedPane;
 
public class Carte extends JPanel
{
	public static void main( String[] arg ) throws IOException
	{
		JFrame frame = new JFrame();
		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
		Carte carte = new Carte( new File( "grand.jpg" ) );
		JTabbedPane tabbed = new JTabbedPane();
		tabbed.add( "premier", new JScrollPane( carte ) );
		frame.getContentPane().add( tabbed );
		frame.setSize( 640, 480 );
		frame.setVisible( true );
	}
 
	private static final long serialVersionUID = 1L;
 
	private BufferedImage fond;
 
	public Carte( File fichierCarte ) throws IOException
	{
		fond = ImageIO.read( fichierCarte );
	}
 
	@Override
	public void paintComponent( Graphics g )
	{
		g.drawImage( fond, 0, 0, this );
	}
 
	@Override
	public Dimension getPreferredSize()
	{
		return new Dimension( getWidth(), getHeight() );
	}
 
	@Override
	public int getHeight()
	{
		return fond.getHeight();
	}
 
	@Override
	public int getWidth()
	{
		return fond.getWidth();
	}
}

**Caxton** · 21/08/2009, 09h30

Effectivement ça fonctionne avec le code de Slim

Quand à la solution de dino, je ne la retient pas, pour le moment, n'étant déjà pas très à l'aise avec la gestion graphique.

Voila ce que j'ai ajouté, par contre je ne sait pas traduire en commentaire l'ajout de la ligne "scroll.setViewportView(panel);", si quelqu'un a une idée, je suis preneur.

Le code complet:

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
 
//Ouvre une carte
    private void jMenuItem1ActionPerformed(java.awt.event.ActionEvent evt) {                                           
        String urlImage = "D:/A surveiller/plan-vierge.png";    //L'endroit ou est stocker l'image
 
        ImageIcon carte = new ImageIcon(urlImage);              //Crée une image dans le tampon
 
        int imgWidth = carte.getIconWidth();                    //Récupère la largeur en pixel de l'image
        int imgHeight = carte.getIconHeight();                  //Récupère la hauteur en pixel de l'image
 
        JScrollPane scroll = new JScrollPane();                 //Crée un scroll
        JPanel panel = new JPanel();                            //Crée un panel
        JLabel label = new JLabel(carte);                       //Crée un JLabel avec l'objet carte
 
 
        panel.add(label);                                       //Place dans le panel le label
        panel.setBounds(0, 0, imgWidth, imgHeight);
 
        scroll.add(panel);                                      //Assigne au scroll le panel
        scroll.setBounds(0, 0, imgWidth, imgHeight);            //Taille du scroll
        scroll.setViewportView(panel);
 
        jTabbedPane1.add("Carte", scroll);
        jTabbedPane1.repaint();
 
    }

Il me fraudais maintenant que je puisse éventuellement afficher mes points dessus et que je puisse la déplacé avec la souris si je touche une zone vierge de point.

Commençons par les points. Comment faut-il que je face pour ajouter des points au dessus de la carte et qu'ils soit liée?

Cordialement.

**dinobogan** · 21/08/2009, 10h42

Je me permet d'insister avec ma solution. Elle est plus simple et ne modifie pas dynamiquement l'interface graphique en créant les Component.

Bouton souris gauche : ajouter un message sur le point cliqué
Bouton souris droit : déplacer l'image.
L'image contenant les points cliqué est l'objet "points". Tu peux la modifier à loisir. Un "repaint" affiche les modifications.

Voici le code minimal :

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
136
137
138
139
140
141
142
143
144
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
 
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTabbedPane;
 
public class Carte extends JPanel implements MouseListener, MouseMotionListener
{
	public static void main( String[] arg ) throws IOException
	{
		JFrame frame = new JFrame();
		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
		Carte carte = new Carte( new File( "grand.jpg" ) );
		JTabbedPane tabbed = new JTabbedPane();
		tabbed.add( "premier", carte.getJScrollPane() );
		frame.getContentPane().add( tabbed );
		frame.setSize( 640, 480 );
		frame.setVisible( true );
	}
 
	private static final long serialVersionUID = 1L;
 
	private BufferedImage fond;
	private BufferedImage points;
	private Point deplaceSouris = null;
	private JScrollPane scroll;
 
	public Carte( File fichierCarte ) throws IOException
	{
		fond = ImageIO.read( fichierCarte );
		points = new BufferedImage( fond.getWidth(), fond.getHeight(), BufferedImage.TYPE_INT_ARGB );
		addMouseListener( this );
		addMouseMotionListener( this );
		scroll = new JScrollPane( this );
	}
 
	public JScrollPane getJScrollPane()
	{
		return scroll;
	}
 
	@Override
	public void paintComponent( Graphics g )
	{
		g.drawImage( fond, 0, 0, this );
		g.drawImage( points, 0, 0, this );
	}
 
	@Override
	public Dimension getPreferredSize()
	{
		return new Dimension( getWidth(), getHeight() );
	}
 
	@Override
	public int getHeight()
	{
		return fond.getHeight();
	}
 
	@Override
	public int getWidth()
	{
		return fond.getWidth();
	}
 
	@Override
	public void mouseReleased( MouseEvent e )
	{
		if( e.getButton() == MouseEvent.BUTTON1 )
		{
			Graphics g = points.createGraphics();
			g.setColor( Color.BLACK );
			g.drawString( "(" + e.getX() + ", " + e.getY() + ")", e.getX(), e.getY() );
			g.dispose();
			repaint();
		}
		else
		{
			deplaceSouris = null;
		}
	}
 
	@Override
	public void mousePressed( MouseEvent e )
	{
		if( e.getButton() == MouseEvent.BUTTON3 )
		{
			deplaceSouris = new Point( e.getX(), e.getY() );
		}
	}
 
	@Override
	public void mouseDragged( MouseEvent e )
	{
		if( deplaceSouris != null )
		{
			Point viewPoint = scroll.getViewport().getViewPosition();
			viewPoint.translate( deplaceSouris.x - e.getX(), deplaceSouris.y - e.getY() );
 
			//ne pas deplacer l'image en dehors de la vue en horizontal
			if( viewPoint.x < 0 )
			{ 
				viewPoint.x = 0;
			}
			else if( viewPoint.x > this.getWidth() - scroll.getViewport().getWidth() )
			{ 
				viewPoint.x = this.getWidth() - scroll.getViewport().getWidth(); 
			}
 
			//ne pas deplacer l'image en dehors de la vue en vertical
			if( viewPoint.y < 0 ) 
			{ 
				viewPoint.y = 0; 
			}
			else if( viewPoint.y > this.getHeight() - scroll.getViewport().getHeight() ) 
			{ 
				viewPoint.y = this.getHeight() - scroll.getViewport().getHeight(); 
			}
 
			scroll.getViewport().setViewPosition( viewPoint );
		}
	}
 
	@Override
	public void mouseClicked( final MouseEvent e ){}
	@Override
	public void mouseEntered( MouseEvent e ){}
	@Override
	public void mouseExited( MouseEvent e ){}
	@Override
	public void mouseMoved( MouseEvent e ){}
}

**Caxton** · 24/08/2009, 13h22

Bon, faisons le point.
Je ne suis pas assez qualifié pour comprendre le source de dinobogan, ce que je trouve dommage et d'un autre cotés, j'aimerais essayer d'aller vers cette solution.
La seule chose que j'ai pu comprendre c'est que c'est une extension d'un composant. Oui mais alors comment il s'initialise, comment il peut être utilisé depuis le programme principal?

Je pense qu'un exemple, plus simple, avant de coder une autre solution sera la bienvenue.
Cordialement.

**plegat** · 24/08/2009, 13h46

Envoyé par Microbulle

La seule chose que j'ai pu comprendre c'est que c'est une extension d'un composant. Oui mais alors comment il s'initialise, comment il peut être utilisé depuis le programme principal?

Tu regardes de quel composant il hérite (ici JPanel).
Normalement il y a un constructeur de défini, donc ça fonctionne comme pour n'importe quel composant.
Tu peux utiliser toutes les méthodes du composant père (qui seront soit celles du composant père, soit celle du fils si elles ont été redéfinies dans la classe - par exemple paintComponent() ou getPreferredSize() ici - le choix sera fait par la machine virtuelle)

**dinobogan** · 24/08/2009, 14h45

Envoyé par Microbulle

Bon, faisons le point.
Je ne suis pas assez qualifié pour comprendre le source de dinobogan, ce que je trouve dommage et d'un autre cotés, j'aimerais essayer d'aller vers cette solution.

Ah ! Excuse-moi. Je n'avais pas compris que tu n'avais pas compris

La seule chose que j'ai pu comprendre c'est que c'est une extension d'un composant. Oui mais alors comment il s'initialise, comment il peut être utilisé depuis le programme principal?

Je pense qu'un exemple, plus simple, avant de coder une autre solution sera la bienvenue.
Cordialement.

Faire plus simple, ça ne va pas être facile. Je préfère tenter de t'expliquer mon programme, libre à toi de poser des questions supplémentaires

Code :

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

1
2
public class Carte extends JPanel implements MouseListener, MouseMotionListener
{

La classe Carte, qui s'utilise exactement comme un JPanel. Mais puisqu'elle étend cette classe, on va pouvoir ajouter/modifier/supprimer certains comportements et fonctionnalités de JPanel. La classe Carte va notamment gérer elle-même les méthodes de gestion de souris.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
	public static void main( String[] arg ) throws IOException
	{
		JFrame frame = new JFrame();
		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
		Carte carte = new Carte( new File( "grand.jpg" ) );
		JTabbedPane tabbed = new JTabbedPane();
		tabbed.add( "premier", carte.getJScrollPane() );
		frame.getContentPane().add( tabbed );
		frame.setSize( 640, 480 );
		frame.setVisible( true );
	}

La méthode "main". Comme tu peux voir, l'objet Carte est utilisé comme un JPanel classique à la différence près que le JScrollPane est une donnée membre de Carte. En effet, Carte a besoin de controler le JScrollPane. Une autre solution aurait été de donner une instance d'un JScrollPane dans le constructeur de Carte.

Code :

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

1
2
3
4
5
6
7
 
	private static final long serialVersionUID = 1L;
 
	private BufferedImage fond; //l'image de fond
	private BufferedImage points; //l'image qu'on va modifier au runtime
	private Point deplaceSouris = null; //mémoriser la souris au premier clic
	private JScrollPane scroll; //le scroll pane à controler

Les données membres.

Code :

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

1
2
3
4
5
6
7
8
9
 
	public Carte( File fichierCarte ) throws IOException
	{
		fond = ImageIO.read( fichierCarte );
		points = new BufferedImage( fond.getWidth(), fond.getHeight(), BufferedImage.TYPE_INT_ARGB ); //création image transparente
		addMouseListener( this ); //controler les boutons de souris et la position du curseur
		addMouseMotionListener( this ); //controler les mouvements de curseur
		scroll = new JScrollPane( this );
	}

Le constructeur de Carte : en paramètre le fichier contenant l'image qui ne bougera pas. On construit l'image fixe (fond) et l'image qui sera modifiée (points). On ajoute les différents listeners et on créé le JScrollPane. Notre Carte (qui peut être considérée comme un JPanel) dont l'instance est atteinte par le mot clé "this" est placée dans le JScrollPane.

Code :

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

1
2
3
4
5
6
 
 
	public JScrollPane getJScrollPane()
	{
		return scroll;
	}

Accéder au JScrollPane qui contient la Carte. Permet de placer le JScrollPane avec sa Carte dans une JFrame par exemple, ce qui est effectué dans du code externe (ici, la méthode main).

Code :

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

1
2
3
4
5
6
7
 
	@Override
	public void paintComponent( Graphics g )
	{
		g.drawImage( fond, 0, 0, this );
		g.drawImage( points, 0, 0, this );
	}

Ici, probablement la méthode la plus importante : elle permet de modifier complètement l'apparence graphique du JPanel surchargé. Une instance de Graphics est donnée en paramètre, il suffit de l'utiliser pour dessiner tout ce que l'on souhaite. Ici, on dessine l'image de fond, puis l'image "points" qui contient principalement des zone transparentes, permettant de voir "fond".

Code :

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

1
2
3
4
5
6
 
	@Override
	public Dimension getPreferredSize()
	{
		return new Dimension( getWidth(), getHeight() );
	}

Surcharge de la méthode pour calculer nous même la taille du composant. On va utiliser les méthodes surchargée ci-dessous :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
	@Override
	public int getHeight()
	{
		return fond.getHeight();
	}
 
	@Override
	public int getWidth()
	{
		return fond.getWidth();
	}

Surcharge des méthodes pour connaitre la longueur et la largeur du composant. Il va prendre la taille de l'image "fond", construite à partir du paramètre transmis au constructeur.

Le code suivant permet deux choses : afficher du texte lors d'un clic gauche et déplacer l'image en restant appuyé sur le bouton droit. Ces méthodes sont appelées automatiquement par les listeners :

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
 
	@Override
	public void mouseReleased( MouseEvent e )
	{
		if( e.getButton() == MouseEvent.BUTTON1 )
		{
			Graphics g = points.createGraphics();
			g.setColor( Color.BLACK );
			g.drawString( "(" + e.getX() + ", " + e.getY() + ")", e.getX(), e.getY() );
			g.dispose();
			repaint();
		}
		else
		{
			deplaceSouris = null;
		}
	}

Appelée chaque fois qu'un bouton de souris est relaché.
Si c'est le gauche, on affiche du texte sur l'image "points" à l'endroit du curseur puis on demande de repeindre le composant.
Si c'est le droit, on termine le déplacement en mettant notre objet de sauvegarde de position à null.

Code :

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

1
2
3
4
5
6
7
8
9
 
	@Override
	public void mousePressed( MouseEvent e )
	{
		if( e.getButton() == MouseEvent.BUTTON3 )
		{
			deplaceSouris = new Point( e.getX(), e.getY() );
		}
	}

Appelée chaque fois qu'un bouton souris est appuyé.
Si c'est le droit, on mémorise la position du curseur.

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
 
	@Override
	public void mouseDragged( MouseEvent e )
	{
		if( deplaceSouris != null )
		{
			Point viewPoint = scroll.getViewport().getViewPosition();
			viewPoint.translate( deplaceSouris.x - e.getX(), deplaceSouris.y - e.getY() );
 
			//ne pas deplacer l'image en dehors de la vue en horizontal
			if( viewPoint.x < 0 )
			{ 
				viewPoint.x = 0;
			}
			else if( viewPoint.x > this.getWidth() - scroll.getViewport().getWidth() )
			{ 
				viewPoint.x = this.getWidth() - scroll.getViewport().getWidth(); 
			}
 
			//ne pas deplacer l'image en dehors de la vue en vertical
			if( viewPoint.y < 0 ) 
			{ 
				viewPoint.y = 0; 
			}
			else if( viewPoint.y > this.getHeight() - scroll.getViewport().getHeight() ) 
			{ 
				viewPoint.y = this.getHeight() - scroll.getViewport().getHeight(); 
			}
 
			scroll.getViewport().setViewPosition( viewPoint );
		}
	}

Appelée chaque fois que le curseur se déplace avec un bouton appuyé. Attention à faire du code très léger ou créer un Thread, sinon ça va ramer un maximum !
On va modifier la position du composant se trouvant dans le JScrollPane. On va aussi calculer la position pour ne pas faire "sortir" le composant de la vue du JScrollPane.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
	@Override
	public void mouseClicked( final MouseEvent e ){}
	@Override
	public void mouseEntered( MouseEvent e ){}
	@Override
	public void mouseExited( MouseEvent e ){}
	@Override
	public void mouseMoved( MouseEvent e ){}
}

Ces méthodes ne sont pas utiles pour cet exemple mais on est obligé de les déclarer car elles font parties des interfaces implémentées par la classe Carte.

Bon courage

**Caxton** · 26/08/2009, 13h56

Effectivement, expliqué comme cela, ça fait moins peur.

Si je reprend un peu, car je pense faire par étape. En admettant que j'utilise cette méthode qui ma l'air bien complète, il faudrait que je face comment depuis le programme principal pour affiche quelque chose?

J'entends par là que si je ne fait qu'écrire carte(); ca ne suffira pas. Il faudra bien que je transmette l'url de l'image, et chaque points ainsi que chaque texte de points. D'où ma nouvelle question. Comment on y accède ?

Désolé d'être aussi noob mais je découvre totalement le graphisme en java. Et jamais fait de code orienté graphisme avant

Bref ca me passionne.
Cordialement.

**dinobogan** · 26/08/2009, 15h06

Envoyé par Microbulle

Effectivement, expliqué comme cela, ça fait moins peur.

Si je reprend un peu, car je pense faire par étape. En admettant que j'utilise cette méthode qui ma l'air bien complète, il faudrait que je face comment depuis le programme principal pour affiche quelque chose?

Tu reprends la méthode "main" et tu analyses chaque ligne. Je ne connais pas ton code. Un objet "Carte" s'utilise comme un composant ordinaire.

J'entends par là que si je ne fait qu'écrire carte(); ca ne suffira pas. Il faudra bien que je transmette l'url de l'image

Tu fournis le chemin de l'image au constructeur de "Carte". Si c'est une URL, alors tu dois adapter le code pour utiliser une java.net.URL.

, et chaque points ainsi que chaque texte de points. D'où ma nouvelle question. Comment on y accède ?

Je n'ai pas écrit le code pour faire ça. Pour le moment, c'est le composant lui-même qui gère les points et les textes en interne. Libre à toi d'ajouter une méthode public sur l'objet pour ajouter un texte à un endroit précis sur l'image "points". Tu peux t'inspirer de la méthode "mouseReleased".

Carte 2D avec deux calques liées en movements

2D Java

Discussions similaires

Partager

Partager