Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 7 sur 7
  1. #1
    Futur Membre du Club
    Inscrit en
    septembre 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 88
    Points : 16
    Points
    16

    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 :
    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 :
    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
    Modérateur
    Avatar de sinok
    Profil pro
    Inscrit en
    août 2004
    Messages
    8 762
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : août 2004
    Messages : 8 762
    Points : 12 849
    Points
    12 849

    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 :
    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
    Futur Membre du Club
    Inscrit en
    septembre 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 88
    Points : 16
    Points
    16

    Par défaut Interaction sur une image

    Bonjour,

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

    Code java :
    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
    Modérateur
    Avatar de sinok
    Profil pro
    Inscrit en
    août 2004
    Messages
    8 762
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : août 2004
    Messages : 8 762
    Points : 12 849
    Points
    12 849

    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 :
    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
    Futur Membre du Club
    Inscrit en
    septembre 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 88
    Points : 16
    Points
    16

    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
    Modérateur
    Avatar de sinok
    Profil pro
    Inscrit en
    août 2004
    Messages
    8 762
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : août 2004
    Messages : 8 762
    Points : 12 849
    Points
    12 849

    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 :
    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
    Futur Membre du Club
    Inscrit en
    septembre 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 88
    Points : 16
    Points
    16

    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.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •