Dessiner un rectangle sur une image

Version imprimable

Bonjour,

Voila alors j'ai une image dessinee dans un JPanel (image qui peut change suivant les actions sur une JTable) et je voudrais pouvoir dessiner sur cette image des rectangles 9ou l'on verrai que le contour. C'est en fait pour que l'utilisateur puisse selectionner certaine partie de l'image.
Le rectangle serait donc defini comme sur un logiciel comme paint, l'utilisateur clique sur le bouton gauche puis bouge la souris jusqu a ce que la taille lui convienne..et lache le bouton.

Mon probleme est que je n'arrive pas a effacer le rectangle dessine au fur et a mesure que l'utilisateur l'agrandi.

voila mon bout de code :

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
 
 
panImagePage = new ChangeImageJPanel("./src/img/ImageJPG.jpg");
panImagePage.setLayout(null);
panImagePage.setLocation(new Point(16, 101));
panImagePage.setSize(new Dimension(353, 446));
panImagePage.addMouseListener(new MouseListener()
			{
				public void mouseClicked(MouseEvent e)
				{
 
				}
 
	    		public void mousePressed(MouseEvent e)
	    		{
	    			xs = e.getX();
					zs = e.getY();
					start=1;					
	    		}
 
			    public void mouseReleased(MouseEvent e)
			    {
			    	Graphics g = getGraphics();
			    	xf = e.getX();
					zf = e.getY();
					int x = (int)xs + 16 + 331 + 5;
	                int y = (int)zs + 101 + 18 + 23;
	                int x1 = (int)xf - (int)xs;
	                int y1 = (int)zf - (int)zs;
					g.drawRect(x,y,x1,y1);
					start=0;
					nextX = 0; 
					nextY = 0;
			    }
 
			    public void mouseEntered(MouseEvent e)
			    {
			    }
 
			    public void mouseExited(MouseEvent e)
			    {
			    }
 
			});
			panImagePage.addMouseMotionListener(new MouseMotionListener(){
 
				public void mouseDragged(MouseEvent e) {
					if (start==1){
		                int x = (int)xs + 16 + 331 + 5;
		                int y = (int)zs + 101 + 18 + 23;
		                nextX = e.getX()-(int)xs; 
		                nextY = e.getY()-(int)zs;
			Graphics g = getGraphics();
						//g.clearRect(x, y, prevX, prevY);
						g.clipRect(x,y,nextX,nextY);
						g.drawRect(x,y,nextX,nextY);
		                g.dispose();
						}
				}
 
				public void mouseMoved(MouseEvent e) {
				}
 
			});

La j'utilise g.clipRect pour justement ne pas avoir ce probleme mais c'est une solution de secours.
Puis de toute facon si l'utilisateur revient en arriere ( reduit le rectangle) cela repose le probleme.

Desole pour les accents, je suis sur un clavier anglais.
merci beaucoup.

09/06/2007, 22h18
HNoury

J'ai pu résoudre ce genre de problème en faisant de la valeur des points une ArrayList dédiée. Le rectangle est construit à partir de cette ArrayList (La discussion est encore sur le forum, elle s'intitule " Mon dessin s'efface, et j'ai essayé diverses choses"). La ArrayList est nettoyée en début d'utilisation, et tu la "recharges" au cours de ton MouseEvent.

Tu ne dessines pas de maniere appropriee. Le squelette de ton gestionnaire de selection devrait etre similaire a ceci (par exemple dans le code de ChangeImageJPanel):

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
 
Rectangle selection; 
 
// = MouseListener + MouseMotionListener
MouseInputListener im = new MouseInputListener() {
  public void mouseClicked(MouseEvent e) {
  }
 
  public void mousePressed(MouseEvent e) {
    (if r == null) {
       r= new Rectangle(e.getX(), e.getY(), 0, 0);
    }    
  }
 
  public void mouseReleased(MouseEvent e) {
    if (r != null) {
       r.width = ...;
       r.height = ...;
       repaint();
    }
  }
 
  public void mouseEntered(MouseEvent e)  {
  }
 
  public void mouseExited(MouseEvent e) {
  }
 
  public void mouseDragged(MouseEvent e) {
    if (r != null) {
       r.width = ...;
       r.height = ...;
       repaint();
    }
  }
 
  public void mouseMoved(MouseEvent e) {
  }
}
addMouseListener(im);
addMouseMotionListener(im);
 
[...]
 
/** {@inheritDoc}
*/
@Override protected void paintComponent(Graphics g) {
  // Paint panel & image.
  [...]
  Graphics2D g2d = (Graphics2D) g;
  if (r != null) {
     g2d.setStroke(selectionStroke);
     //g.setPaint(selectionPaint);
     g2d.setColor(selectionColor);
     //g.setXORMode(Color.WHITE);
     g2d.draw(r);
  }
}

Merci pour ces reponses.
Je viens d'essayer ta methode bouye sans succes..impossible d'afficher un rectangle, je ne comprends pas. Peut etre est ce parce que dans la methode paintComponent j'affiche aussi l'image qui est en fond.
De toute facon je pense que je vais etre oblige de faire ce que m'a dit HNoury etant donne que je veux afficher plusieurs rectangle a la fois, non ?

Par contre apres sera t il possible de selectionner ce rectangle pour le deplacer et le redimensionner par exemple ? Si oui, comment ? Je ne trouve pas grand chose a ce sujet sur le net..

J'essaye donc la methode de HNoury.
En attendant voici mon code :

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
 
 
panImagePage = new DrawHotSpot("./src/img/ImageJPG.jpg",selection);
			panImagePage.setLayout(null);
			panImagePage.setLocation(new Point(16, 101));
			panImagePage.setSize(new Dimension(353, 446));
			panImagePage.addMouseListener(new MouseListener()
			{
				public void mouseClicked(MouseEvent e)
				{
 
				}
 
	    		public void mousePressed(MouseEvent e)
	    		{
	    			//if (selection == null) {
				    	int x = e.getX() + 16 + 331 + 5;
		                int y = e.getY() + 101 + 18 + 23;
		                selection = new Rectangle(x, y, 0, 0);
		                panImagePage.setSelection(selection);
				    //}  					
	    		}
 
			    public void mouseReleased(MouseEvent e)
			    {
			    	if (selection != null) {
					       selection.width = e.getX() - selection.x ;
					       selection.height = e.getY() - selection.y;
					       panImagePage.setSelection(selection);
					       panImagePage.repaint();
					    }
			    }
 
			    public void mouseEntered(MouseEvent e)
			    {
			    }
 
			    public void mouseExited(MouseEvent e)
			    {
			    }
 
			});
			panImagePage.addMouseMotionListener(new MouseMotionListener(){
 
				public void mouseDragged(MouseEvent e) {
					 if (selection != null) {
					    	selection.width = e.getX() - selection.x ;
						    selection.height = e.getY() - selection.y;
						    panImagePage.setSelection(selection);
						    panImagePage.repaint();
					    }
				}
 
				public void mouseMoved(MouseEvent e) {
				}
 
			});

et la classe DrawHotSpot :

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 DrawHotSpot extends JPanel {
 
	private static final long serialVersionUID = 1L;
	private Image _imageSelected;
	private Rectangle selection;
 
	public DrawHotSpot(){
 
	}
    public DrawHotSpot(String pathImage, Rectangle select){
    	super();
    	_imageSelected = Toolkit.getDefaultToolkit().getImage(pathImage);	
    	selection = select;
		try{
			MediaTracker mt = new MediaTracker(this);
			mt.addImage(_imageSelected,0);
			mt.waitForAll();
		}catch(Exception e){
			e.printStackTrace();
		}	
    }
 
    public void setImageSelected(String pathImage) {
    	_imageSelected = Toolkit.getDefaultToolkit().getImage(pathImage);	
    }
 
    public void setSelection(Rectangle select) {
    	selection = select;	
    }
 
    public void paintComponent(Graphics g) {
    	try{
			MediaTracker mt = new MediaTracker(this);
			mt.addImage(_imageSelected,0);
			mt.waitForAll();
		}catch(Exception e){
			e.printStackTrace();
		}
            g.drawImage(_imageSelected,0,0,this.getWidth(),this.getHeight(),null);
 
            Graphics2D g2d = (Graphics2D) g;
			  if (selection != null) {
				  System.out.print("On rafraichit !!\n");
				  BasicStroke bs1 = new BasicStroke(8,
					      BasicStroke.CAP_SQUARE,
					      BasicStroke.JOIN_ROUND);
				  g2d.setStroke(bs1);
			     //g.setPaint(selectionPaint);
			     g2d.setColor(Color.BLACK);
			     //g.setXORMode(Color.WHITE);
			     g2d.draw(selection);
			  }
    } 
}

Merci beaucoup.

Je pense que j'ai encore le meme probleme avec cette methode. J'ai l'impression que mon dessin s'efface a peine cree, il dois y avoir quelque chose que je n'ai pas saisie..

Je vous met mon bout de code:
Si vous pouvez me donner un petit coup de main, ca serait super..

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
 
 
panImagePage = new DrawHotSpot("./src/img/ImageJPG.jpg");
			panImagePage.setLayout(null);
			panImagePage.setLocation(new Point(16, 101));
			panImagePage.setSize(new Dimension(353, 446));
			panImagePage.addMouseListener(new MouseListener()
			{
				public void mouseClicked(MouseEvent e)
				{
 
				}
 
	    		public void mousePressed(MouseEvent e)
	    		{
	    			xs = e.getX();
	    			zs = e.getY();
	    			int x = e.getX() + 16 + 331 + 5;
	                int y = e.getY() + 101 + 18 + 23;
	                panImagePage.addRect(x, y, 0, 0, Color.blue);
	    		}
 
			    public void mouseReleased(MouseEvent e)
			    {
			    	//we delete the old rectangle
			    	panImagePage.supprRect();
			    	// we insert the new
			    	int x = (int)xs + 16 + 331 + 5;
	                int y = (int)zs + 101 + 18 + 23;
	                int w = e.getX() - (int)xs;
	                int h = e.getY() - (int)zs;
	                panImagePage.addRect(x, y, w, h, Color.blue);
			    }
 
			    public void mouseEntered(MouseEvent e)
			    {
			    }
 
			    public void mouseExited(MouseEvent e)
			    {
			    }
 
			});
			panImagePage.addMouseMotionListener(new MouseMotionListener(){
 
				public void mouseDragged(MouseEvent e) {
					//we delete the old rectangle
			    	panImagePage.supprRect();
			    	// we insert the new
			    	int x = (int)xs + 16 + 331 + 5;
	                int y = (int)zs + 101 + 18 + 23;
	                int w = e.getX() - (int)xs;
	                int h = e.getY() - (int)zs;
	                panImagePage.addRect(x, y, w, h, Color.blue);
				}
 
				public void mouseMoved(MouseEvent e) {
				}
 
			});

et la classe DrawHotSpot:

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
 
 
public class DrawHotSpot extends JPanel {
 
 
	class MyRectangle {
		int x;
		int y;
		int width;
		int height;
		Color color;
	}
 
	ArrayList<MyRectangle> rectangles = new ArrayList<MyRectangle>();
	private Image _imageSelected;
 
	 public DrawHotSpot(String pathImage){
	    	super();
	    	_imageSelected = Toolkit.getDefaultToolkit().getImage(pathImage);	
			try{
				MediaTracker mt = new MediaTracker(this);
				mt.addImage(_imageSelected,0);
				mt.waitForAll();
			}catch(Exception e){
				e.printStackTrace();
			}	
	    }
 
	 public void setImageSelected(String pathImage) {
	    	_imageSelected = Toolkit.getDefaultToolkit().getImage(pathImage);	
	    }
 
	public void paintComponent(Graphics g) {
		super.paintComponent(g);
 
		try{
			MediaTracker mt = new MediaTracker(this);
			mt.addImage(_imageSelected,0);
			mt.waitForAll();
		}catch(Exception e){
			e.printStackTrace();
		}
        g.drawImage(_imageSelected,0,0,this.getWidth(),this.getHeight(),null);
 
        System.out.print("on raffraichit !!\n");
		for (int i=0;i<rectangles.size();++i)
			traceRectangle(g,rectangles.get(i));
 
	}		
 
	public void addRect( int ox, int oy, int width, int height, Color color) {
		MyRectangle rectangle = new MyRectangle();
		rectangle.x = ox;
		rectangle.y = oy;
		rectangle.width = width;
		rectangle.height = height;
		rectangle.color = color;
		rectangles.add(rectangle);
		System.out.print("rectangle ajoute !!\n");
		repaint();
	}
 
	public void supprRect() {
		int i = rectangles.size()-1;
		rectangles.remove(i);
		repaint();
	}
 
	private void traceRectangle(Graphics g,MyRectangle rect) {
		g.setColor(rect.color);
		System.out.print("on affiche !!\n");
		g.drawRect(rect.x,rect.y,rect.width,rect.height);
	}

Merci beaucoup.

11/06/2007, 21h45
HNoury

Mon code, soufflé par un membre du forum, servait à dessiner une série de points, mais il n'était pas question de les déplacer ou de les supprimer.

Mon idée était de créer un tableau de 4 int par rectangle, et tu crées autant de tableaux que de rectangles. Après, tu pourras toujours les modifier ou les supprimer. Ne crées pas tous tes rectangles d'un coup dans ton cas. (Moi, c'est pour faire des IFS à 10 000 points, cela n'a rien à voir).