IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AWT/Swing Java Discussion :

Interaction sur une image


Sujet :

AWT/Swing Java

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Septembre 2008
    Messages
    99
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Septembre 2008
    Messages : 99
    Points : 52
    Points
    52
    Par défaut Interaction sur une image
    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

  2. #2
    Expert éminent sénior
    Avatar de sinok
    Profil pro
    Inscrit en
    Août 2004
    Messages
    8 765
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Août 2004
    Messages : 8 765
    Points : 12 977
    Points
    12 977
    Par défaut
    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.
    Hey, this is mine. That's mine. All this is mine. I'm claiming all this as mine. Except that bit. I don't want that bit. But all the rest of this is mine. Hey, this has been a really good day. I've eaten five times, I've slept six times, and I've made a lot of things mine. Tomorrow, I'm gonna see if I can't have sex with something.

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Septembre 2008
    Messages
    99
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Septembre 2008
    Messages : 99
    Points : 52
    Points
    52
    Par défaut Interaction sur une image
    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

  4. #4
    Expert éminent sénior
    Avatar de sinok
    Profil pro
    Inscrit en
    Août 2004
    Messages
    8 765
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Août 2004
    Messages : 8 765
    Points : 12 977
    Points
    12 977
    Par défaut
    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:

    Hey, this is mine. That's mine. All this is mine. I'm claiming all this as mine. Except that bit. I don't want that bit. But all the rest of this is mine. Hey, this has been a really good day. I've eaten five times, I've slept six times, and I've made a lot of things mine. Tomorrow, I'm gonna see if I can't have sex with something.

  5. #5
    Membre du Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Septembre 2008
    Messages
    99
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Septembre 2008
    Messages : 99
    Points : 52
    Points
    52
    Par défaut Interaction sur une image
    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

  6. #6
    Expert éminent sénior
    Avatar de sinok
    Profil pro
    Inscrit en
    Août 2004
    Messages
    8 765
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Août 2004
    Messages : 8 765
    Points : 12 977
    Points
    12 977
    Par défaut
    commence par la plus simple de toutes, tu verras ensuite s'il est besoins de profiter des paramètres supplémentaires.

    genre
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    g2.drawImage(img, 0, 0, null);
    Hey, this is mine. That's mine. All this is mine. I'm claiming all this as mine. Except that bit. I don't want that bit. But all the rest of this is mine. Hey, this has been a really good day. I've eaten five times, I've slept six times, and I've made a lot of things mine. Tomorrow, I'm gonna see if I can't have sex with something.

  7. #7
    Membre du Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Septembre 2008
    Messages
    99
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Septembre 2008
    Messages : 99
    Points : 52
    Points
    52
    Par défaut Interaction sur une image
    Bonjour,

    Merci ca fonctionne très bien

    Bonne année A tous par la même occasion

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 6
    Dernier message: 15/11/2007, 13h31
  2. aide sur une image
    Par laetus dans le forum IHM
    Réponses: 5
    Dernier message: 04/10/2004, 15h54
  3. [Servlet] [Image] Dessiner sur une image
    Par gaia_dev dans le forum 2D
    Réponses: 5
    Dernier message: 01/09/2004, 18h11
  4. Zoom sur une image
    Par AurelBUD dans le forum C++Builder
    Réponses: 5
    Dernier message: 07/05/2004, 18h05
  5. Comment mettre un label sur une image
    Par dug dans le forum MFC
    Réponses: 3
    Dernier message: 07/04/2004, 11h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo