Interaction sur une image

**menakikou** · 25/12/2012, 18h03

Bonjour,

J'ai réussi à afficher une image dans une JFrame et à lui ajouter la fonction de zoom.
Par contre je voudrais afficher des petites boules sur cette image, par un exemple ajout d'un listener dés réception de coordonnées (x,y) ,j'affiche une boule dans cette image.

Auriez vous une idées de la façon dont je dois procéder pour afficher ces petites boules à divers instants. Merci d'avance.

Voici mon code qui affiche l'image avec la fonction de zoom.

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
 
import java.awt.*;  
import java.awt.event.*;  
import java.awt.geom.*;  
import java.awt.image.BufferedImage;  
import java.io.*;  
import java.net.*;  
import javax.imageio.ImageIO;  
import javax.swing.*;  
import javax.swing.event.*;  
 
import net.atos.graphics.Circle;
 
public class ZoomTest  
{  
    public static void main(String[] args)  
    {  
        ImagePanel panel = new ImagePanel();  
        ImageZoom zoom = new ImageZoom(panel);  
        JFrame f = new JFrame();  
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  
        f.getContentPane().add(zoom.getUIPanel(), "North");  
        f.getContentPane().add(new JScrollPane(panel));
        f.setSize(400,400);  
        f.setLocation(200,200);  
        f.setVisible(true);  
    }  
}  
 
class ImagePanel extends JPanel  
{  
    BufferedImage image;  
    double scale;  
 
    public ImagePanel()  
    {  
        loadImage();  
        scale = 1.0;  
        setBackground(Color.black);  
    }  
 
    protected void paintComponent(Graphics g)  
    {  
        super.paintComponent(g);  
        Graphics2D g2 = (Graphics2D)g;  
        g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION,  
                            RenderingHints.VALUE_INTERPOLATION_BICUBIC);  
        int w = getWidth();  
        int h = getHeight();  
        int imageWidth = image.getWidth();  
        int imageHeight = image.getHeight();  
        double x = (w - scale * imageWidth)/2;  
        double y = (h - scale * imageHeight)/2;  
        AffineTransform at = AffineTransform.getTranslateInstance(x,y);  
        at.scale(scale, scale);  
        g2.drawRenderedImage(image, at);  
    }  
 
    /** 
     * For the scroll pane. 
     */  
    public Dimension getPreferredSize()  
    {  
        int w = (int)(scale * image.getWidth());  
        int h = (int)(scale * image.getHeight());  
        return new Dimension(w, h);  
    }  
 
    public void setScale(double s)  
    {  
        scale = s;  
        revalidate();      // update the scroll pane  
        repaint();  
    }  
 
    private void loadImage()  
    {  
        File file = new File("E:/route1_28.png");
        try  
        {  
            //URL url = getClass().getResource("file:///E:/route1_28.png");  
            image = ImageIO.read(file);  
        }  
        catch(MalformedURLException mue)  
        {  
            System.out.println("URL trouble: " + mue.getMessage());  
        }  
        catch(IOException ioe)  
        {  
            System.out.println("read trouble: " + ioe.getMessage());  
        }  
    }  
}  
 
class ImageZoom  
{  
    ImagePanel imagePanel;  
 
    public ImageZoom(ImagePanel ip)  
    {  
        imagePanel = ip;  
    }  
 
    public JPanel getUIPanel()  
    {  
        SpinnerNumberModel model = new SpinnerNumberModel(1.0, 0.1, 1.4, .01);  
        final JSpinner spinner = new JSpinner(model);  
        spinner.setPreferredSize(new Dimension(45, spinner.getPreferredSize().height));  
        spinner.addChangeListener(new ChangeListener()  
        {  
            public void stateChanged(ChangeEvent e)  
            {  
                float scale = ((Double)spinner.getValue()).floatValue();  
                imagePanel.setScale(scale);  
            }  
        });  
        JPanel panel = new JPanel();  
        panel.add(new JLabel("scale"));  
        panel.add(spinner);  
        return panel;  
    }  
}

Je voudrais par exemple, à un moment donné dessiner sur la cette image qui est affiché , une boule rouge de cette façon :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
public class Circle extends JPanel{
 
    private Graphics g ;
 
    public void paintComponent(int x, int y){
 
        g.setColor(Color.RED);
        g.fillOval(500, 618, 50, 20);
 
    }
}

Mais comment superposés une boule sur une image à chaque fois que j'ai de nouveaux coordonnées !!

Merci d'avance

**sinok** · 26/12/2012, 15h14

C'est sur le composant même où tu dessines l'image que tu dois dessiner tes cercles, et non sur des composants séparés.

Dans ton composant ImagePanel je recommande d'avoir une List contant des Shape de type Ellipse2D (

Code :

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

Shape s = new Ellipse2D.Double(51,32, 15, 15);

), classe permettant de représenter une forme circulaire, définissant son emplacement, sa taille et sa position.

Puis, dans ton paintComponent, après avoir dessiné l'image, tu dessine tes Ellipse2D au moyen des méthodes draw/fill de la classe Graphics2D.

**menakikou** · 26/12/2012, 15h59

Bonjour,

Merci pour votre réponse , j'ai rajouté l'Ellipse.

Code java :

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
 
 protected void paintComponent(Graphics g)  
    {  
        super.paintComponent(g);  
        Graphics2D g2 = (Graphics2D)g;  
        g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION,  
                            RenderingHints.VALUE_INTERPOLATION_BICUBIC);  
        int w = getWidth();  
        int h = getHeight();  
        int imageWidth = image.getWidth();  
        int imageHeight = image.getHeight();  
        double x = (w - scale * imageWidth)/2;  
        double y = (h - scale * imageHeight)/2;  
        AffineTransform at = AffineTransform.getTranslateInstance(x,y);  
        at.scale(scale, scale);  
 
		g2.drawRenderedImage(image, at);
        Shape s = new Ellipse2D.Double(500,389, 100, 15);
        g2.fill(s); }

Le problème est que cette Ellipse ne suit pas la translation avec le scale.
Je voudrais qu'elle subisse aussi la même Transformation que l'image initiale pour avoir de la cohérence. (Appliquer un AffineTransform) c'est compliqué à appliquer.

Auriez vous une idée pour que cette Ellipse puisse être en norme avec l'image ?

Merci d'avance

**sinok** · 26/12/2012, 16h26

Utilise la méthode setTransform des Graphics2D plutôt que de passer ton AffineTransform en paramètre de la méthode drawRenderedImage (à remplacer par un drawImage).

Ainsi la transform sera appliquée à l'intégralité des opérations que tu effectueras sur tes Graphics2D.

Petit grade fou à mettre en place pour que la transform n'affecte pas les opérations consécutives au painComponent, au lieu de directement faire un cast des Graphics en Graphics2D, il est préférable de créer un contexte graphique temporaire de la façon suivante

Code :

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

Graphics2D g2 = (Graphics2D) g.create();

Et une fois les opérations finies sur ce Graphics2D, de les clôturer de la façon suivante:

Code :

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

g2.dispose();

**menakikou** · 26/12/2012, 16h42

oh la la , pleins de méthode drawImage(..)

, laquelle choisir

, j'ai bien compris que tu me conseille de mettre le tout dans le graphique et affecter la transformation pour tous.

As tu essayé de faire tourner le code ca a marché pour toi ? quel méthode as tu choisi ?

Merci