Création d'une zone cliquable [Résolu]

Messages postés
53
Date d'inscription
lundi 21 janvier 2008
Dernière intervention
5 mars 2008
- - Dernière réponse : Twinuts
Messages postés
5309
Date d'inscription
dimanche 4 mai 2003
Dernière intervention
18 décembre 2018
- 22 janv. 2008 à 15:32
Bonjour,
je débute en java et je cherche un moyen de créer une zone cliquable sur une image.
Je ne vois pas comment rendre une partie de l'image sensible au clic. Une fois qu'une zone sera définie il me suffira de faire un MouseListener sur la zone je pense mais comment définir cet emplacement....
Je dois concevoir un régulateur de vitesse. J'utilise une photo de tableau de bord et j'aimerais pouvoir cliquer sur le " + " par exemple présent sur le volant pour augmenter la vitesse du véhicule.
Est ce que ce que je souhaite faire est réalisable sous Java et si oui comment?
Merci d'avance
Afficher la suite 

Votre réponse

13 réponses

Meilleure réponse
Messages postés
5309
Date d'inscription
dimanche 4 mai 2003
Dernière intervention
18 décembre 2018
1
Merci
Salut,

bah l'entraide c'est fait pour ça ^^

pour ton problème on va concerver le code ci-dessus et le modifier un chouilla de façon à permettre de ne prendre que des zones de l'image (oui, oui c'est possible et simplement en plus ^^)

comme taleur les modification sont en gras

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JComponent;
import javax.swing.JFrame;

public class Frame extends JFrame {

    private static final long    serialVersionUID    = 4983727800375272097L;

    public Frame() {
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(800, 600);
        setLocationRelativeTo(null);
        BufferedImage img = null;
        try {
            img = ImageIO.read(new File("img.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        setContentPane(new MyCanvas(img));

    }

    public static void main(String[] args) {
        new Frame().setVisible(true);
    }

    private static class MyCanvas extends JComponent implements MouseListener {

        private static final long    serialVersionUID    = 8845913940083986438L;
        // position de la première zone de limage que l'on veut (ici elle se trouve au pixel x=0, y=0 et s'étend sur width=10 et height=10)
        private static final Rectangle    ZONE_IMAGE_1 = new Rectangle(0, 0, 10, 10);
        // position de la première zone de limage que l'on veut (ici elle se trouve au pixel x=100, y=100 et s'étend sur width=30 et height=20)
        private static final Rectangle    ZONE_IMAGE_2 = new Rectangle(100, 100, 30, 20);
        // image à dessiner
        private BufferedImage buff          = null;
       
       
      
        public MyCanvas(BufferedImage img) {
            this.addMouseListener(this);
            this.buff = img;
        }
      
        public void paintComponent(Graphics g) {
            // dessine l'image
            g.drawImage(buff, 0, 0, buff.getWidth(), buff.getHeight(), this);
            // juste histoire de voir ou se trouvent les zones (plus facil pour le test ^^)
            g.setColor(Color.GREEN);
            g.drawRect(ZONE_IMAGE_1.x, ZONE_IMAGE_1.y, ZONE_IMAGE_1.width, ZONE_IMAGE_1.height);
            g.drawRect(ZONE_IMAGE_2.x, ZONE_IMAGE_2.y, ZONE_IMAGE_2.width, ZONE_IMAGE_2.height);
        }
      
        private void testLocation(Point mouse, Rectangle area, String text) {
            // test si la souris est dans les data de l'image
            if(area.contains(mouse))
                System.out.println(text + " - image");
            else
                System.out.println(text + " - !image");
        }

        public void mouseClicked(MouseEvent e) {
            //récupération de la position de la souri
            Point p = e.getPoint();
            testLocation(p, ZONE_IMAGE_1, "mouseClicked - data 1");
            testLocation(p, ZONE_IMAGE_2, "mouseClicked - data 2");
        }
      
        public void mousePressed(MouseEvent e) {
            //récupération de la position de la souri
            Point p = e.getPoint();
            testLocation(p, ZONE_IMAGE_1, "mousePressed - data 1");
            testLocation(p, ZONE_IMAGE_2, "mousePressed - data 2");
        }
        public void mouseReleased(MouseEvent e) {
            //récupération de la position de la souri
            Point p = e.getPoint();
            testLocation(p, ZONE_IMAGE_1, "mouseReleased - data 1");
            testLocation(p, ZONE_IMAGE_2, "mouseReleased - data 2");
        }

        public void mouseEntered(MouseEvent e) { }
        public void mouseExited(MouseEvent e) { }
      
    }
}

PS : pour prendre une portion d'une image tu peux utiliser la méthode suivante :
Toolkit tk = Toolkit.getDefaultToolkit();
// position de l'image à prendre dans l'image source
Rectangle rectangle = new Rectangle(100, 100, 20, 50);
// découpage d'une zones de l'image (prend juste une copie en mémoire)
Image zone1 = tk.createImage(new FilteredImageSource(img.getSource(),
                    new CropImageFilter(rectangle)));

------------------------------------
"On n'est pas au resto : ici on ne fait pas dans les plats tout cuits ..."

OoWORAoO

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 97 internautes nous ont dit merci ce mois-ci

Commenter la réponse de Twinuts
Messages postés
5309
Date d'inscription
dimanche 4 mai 2003
Dernière intervention
18 décembre 2018
0
Merci
Salut,

ajoute un MouseListener sur l'objet graphique qui contient ton image et spy la zone où se trouve ton image afin de savoir si un clic est fait dessus ou non.

------------------------------------
"On n'est pas au resto : ici on ne fait pas dans les plats tout cuits ..."

OoWORAoO
Commenter la réponse de Twinuts
Messages postés
53
Date d'inscription
lundi 21 janvier 2008
Dernière intervention
5 mars 2008
0
Merci
oui ça aurait pu être la solution si je voulais que toute l'image soit cliquable mais je veux seulement que quelques parties de cette image le soit.
Et ça veut dire quoi exactement " spy la zone " , je devine, mais en java je vois pas trop comment ça se code.
Commenter la réponse de ldumont
Messages postés
5309
Date d'inscription
dimanche 4 mai 2003
Dernière intervention
18 décembre 2018
0
Merci
Salut,

au plus simple, tu prends le Rectangle de ta zone (de l'image) et tu tests si la souris est dedans ou non ^^

------------------------------------
"On n'est pas au resto : ici on ne fait pas dans les plats tout cuits ..."

OoWORAoO
Commenter la réponse de Twinuts
Messages postés
53
Date d'inscription
lundi 21 janvier 2008
Dernière intervention
5 mars 2008
0
Merci
tu veux dire que je superpose un petit rectangle à une parcelle de mon image? Et pour trouver la bonne position je fais comment? Je cherche à taton les coordonnées en pixel? Que de questions pour un seul message.

En tout cas merci de vos réponses si rapides!
Commenter la réponse de ldumont
Messages postés
5309
Date d'inscription
dimanche 4 mai 2003
Dernière intervention
18 décembre 2018
0
Merci
Salut,

heu nan pas exactement... voici un petit bout de code d'exemple illustrant l'idée :

les textes en gras explique ce que je voulais dire

import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.image.BufferedImage;
import java.awt.image.Raster;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JComponent;
import javax.swing.JFrame;

public class Frame extends JFrame {

    private static final long    serialVersionUID    = 4983727800375272097L;

    public Frame() {
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(800, 600);
        setLocationRelativeTo(null);
        BufferedImage img = null;
        try {
            img = ImageIO.read(new File("img.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        setContentPane(new MyCanvas(img));

    }

    public static void main(String[] args) {
        new Frame().setVisible(true);
    }

    private class MyCanvas extends JComponent implements MouseListener {

        private static final long    serialVersionUID    = 8845913940083986438L;
        // image à dessiner
        private BufferedImage        buff                = null;
        // data de l'image
        private Raster                data                = null;
       
        public MyCanvas(BufferedImage img) {
            this.addMouseListener(this);
            this.buff = img;
            this.data = img.getData();
        }
       
        public void paintComponent(Graphics g) {
            // dessine l'image
            g.drawImage(buff, 0, 0, buff.getWidth(), buff.getHeight(), this);
        }
       
        private void testLocation(Point mouse, String text) {
            // test si la souris est dans les data de l'image
            if(data.getBounds().contains(mouse))
                System.out.println(text + " - image");
            else
                System.out.println(text + " - !image");
        }

        public void mouseClicked(MouseEvent e) {
            //récupération de la position de la souri
            Point p = e.getPoint();
            testLocation(p, "mouseClicked");
        }
       
        public void mousePressed(MouseEvent e) {
            //récupération de la position de la souri
            Point p = e.getPoint();
            testLocation(p, "mousePressed");
        }
        public void mouseReleased(MouseEvent e) {
            //récupération de la position de la souri
            Point p = e.getPoint();
            testLocation(p, "mouseReleased");
        }

        public void mouseEntered(MouseEvent e) { }
        public void mouseExited(MouseEvent e) { }
       
    }
}

------------------------------------
"On n'est pas au resto : ici on ne fait pas dans les plats tout cuits ..."

OoWORAoO
Commenter la réponse de Twinuts
Messages postés
53
Date d'inscription
lundi 21 janvier 2008
Dernière intervention
5 mars 2008
0
Merci
ton code marche nickel; c'est exactement ce que je veux, mais le seul hic, c'est que je souhaiterai que cela ne se fasse que sur une partie de mon image, que le reste de l'image soit neutre par exemple.

Je vais essayer d'expliciter un peu : ma fenetre principale est en fait un tableau de bord, avec donc le volant, les compteurs et puis un pad sur le volant, avec une touche ' + ' et une touche ' - '
Je cherche à savoir si l'utilisateur a appuyé sur la touche ' + ' par exemple pour donner l'ordre d'augmenter la vitesse, à mon régulateur de vitesse.

Mon problème réside dans la détection de l'appui sur le ' + ' ou le ' - ' qui sont deux parties distinctes de l'image.
Il faudrait que j'arrive à faire ce que tu m'as permis de faire grâce à ton code mais sur une partie restreinte de l'image. Donc je dois délimiter une zone et c'est la que je pêche.

Vraiment merci d'avoir passé du temps en tout cas, ça ma quand même fait avancer! Et puis je crois que je n'ai pas été assez claire au début.
C'est incroyable de pouvoir être aidée par de parfaits inconnus et d'une façon totalement désinteressée.
Commenter la réponse de ldumont
Messages postés
53
Date d'inscription
lundi 21 janvier 2008
Dernière intervention
5 mars 2008
0
Merci
Génial! merci, je vais essayer d'adapter ça à mon image et à mon programme mais ça devrait le faire.
Merci merci !!!
Commenter la réponse de ldumont
Messages postés
112
Date d'inscription
vendredi 24 décembre 2004
Dernière intervention
20 décembre 2011
0
Merci
    Chapeau [auteur/TWINUTS/43739.aspx Twinuts] ^^
Commenter la réponse de KenZara
Messages postés
5309
Date d'inscription
dimanche 4 mai 2003
Dernière intervention
18 décembre 2018
0
Merci
Salut,

si l'intégration se fait sans prob et que tu as ce que tu veux pense à valider le ou les postes qui résolvent le problème ^^

------------------------------------
"On n'est pas au resto : ici on ne fait pas dans les plats tout cuits ..."

OoWORAoO
Commenter la réponse de Twinuts
Messages postés
5309
Date d'inscription
dimanche 4 mai 2003
Dernière intervention
18 décembre 2018
0
Merci
pourquoi [auteur/KENZARA/409997.aspx KenZara] ?

------------------------------------
"On n'est pas au resto : ici on ne fait pas dans les plats tout cuits ..."

OoWORAoO
Commenter la réponse de Twinuts
Messages postés
112
Date d'inscription
vendredi 24 décembre 2004
Dernière intervention
20 décembre 2011
0
Merci
    Je te félicite juste.

Ca fait toujours plaisir de voir les gens qui aident :) ... Et je te félicite surtout pour ta patience et ta rapidité à répondre, ce qui est une excellente chose.
Y avait rien de méchant :) ...
Bonne continuation

Kenza
Commenter la réponse de KenZara
Messages postés
5309
Date d'inscription
dimanche 4 mai 2003
Dernière intervention
18 décembre 2018
0
Merci
Salut,

ha oki ^^ merci bien mafois :)

bonne continuation à toi aussi

------------------------------------
"On n'est pas au resto : ici on ne fait pas dans les plats tout cuits ..."

OoWORAoO
Commenter la réponse de Twinuts

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.