Zoom + Scroll

Version imprimable

19/03/2014, 21h16
Jokinou

Zoom + Scroll

Bonjour à tous !

Je débute un nouveau projet en java et j'aimerais savoir si il est possible de pouvoir zoomer sur une image dans une JFrame et faire apparaitre les deux scroll barres en même temps ?
Ainsi j'aurai l'image zoomer, mais je pourrai défiler de haut en bas et de droite à gauche pour voire la totalité de l'image. Lorsque l'image est à taille réelle , les scrolls n'apparaitraient pas .

Est-ce qu'il ya moyen de faire ça simplement ?

Merci d'avance pour votre réponse :)

Salut,

Oui, c'est faisable :

1) fait une classe qui étend JPanel et qui dessine l'image dans une taille qui dépend du facteur de zoom (en étendant la méthode paint() (méthode drawImage de Graphics) :

Code:

1
2
public void paint(Graphics g) {
}

2) mets ce JPanel dans un JScrollPane. Ensuite, en fonction du zoom, l'image va changer de taille, donc le JPanel devrait aussi, de manière à ce que le JScrollPane réagisse en affichant des assenseurs adaptés. La méthode pour y parvenir est expliquée dans ce tutoriel oracle.

Et voilà ce que ça donne, tout simplement :

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
public class ImagePanel extends JPanel {
 
    private BufferedImage image;
    private float zoom;
    private int imageWidth;
    private int imageHeight;
 
    public ImagePanel(BufferedImage image) {
        this.image=image;
        this.zoom=1;
        updateImageSize();
    }
 
    public void setZoom(float zoom) {
        this.zoom = zoom;
        updateImageSize();
        revalidate();
    }
 
    private void updateImageSize() {
        imageWidth=(int) (image.getWidth()*zoom);
        imageHeight=(int) (image.getHeight()*zoom);
    }
 
    @Override
    public Dimension getPreferredSize() {
        return new Dimension(imageWidth, imageHeight);
    }
 
    @Override
    public void paint(Graphics g) {
        super.paint(g);
        g.drawImage(image, 0, 0, imageWidth, imageHeight, this);
    }
 
    public static void main(String[] args) {
 
 
        try {
            JFrame frame = new JFrame();
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
            JPanel panel = new JPanel();
            panel.setLayout(new BorderLayout());
 
            final ImagePanel imagePanel = new ImagePanel(ImageIO.read(new File("C:/Documents and Settings/Joël/Mes documents/Mes images/avatar/suricate.carre.jpg")));
            panel.add(new JScrollPane(imagePanel), BorderLayout.CENTER);
 
            final JSlider slider = new JSlider(0, 100, 0);
            panel.add(slider, BorderLayout.SOUTH);
            slider.addChangeListener(new ChangeListener() {
 
                @Override
                public void stateChanged(ChangeEvent e) {
                    imagePanel.setZoom(1+slider.getValue()/10f);
                }
            });
 
            frame.setContentPane(panel);
 
 
            frame.setSize(200,200);
            frame.setLocationRelativeTo(null);
            frame.setVisible(true);
 
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }
 
 
    }
 
}

21/03/2014, 16h30
Jokinou

Merci de ta réponse. Mais ma question était :
Est-ce possible de ne faire apparaitre les ScrollBars uniquement lorsque qu'on zoom ?
Mon objectif est de faire :
double click = zoom sur la fenêtre donc apparition des ScrollBars
encore un double click = dezoom et disparition des ScrollBars.

Dis moi si tu ne comprends pas ce que je veux dire ^^
21/03/2014, 17h13
joel.drigo
C'est bien le cas avec mon exemple : les ascenseurs n'apparaissent que si l'image est plus grande que l'espace qui l'affiche. En fait, ils apparaissent dès que la dimension renvoyée par getPreferredSize() est plus grande que la zone affichée par le JScrollPane, et disparaissent dans le cas contraire.

En fait ce sont les méthodes JScrollpane.setHorizontalScrollBarPolicy()) et JScrollPane.setVerticalScrollBarPolicy() qui permettent de configurer l'affichage parmi :
- Toujours visible
- Jamais visible
- Visible uniquement lorsque nécessaire
Et c'est ce dernier cas qui est paramétré par défaut.
22/03/2014, 10h55
Jokinou

Ok, merci du coup j'ai bien compris. C'est juste que mon image était vraiment grosse, du coup je m'en rendais pas compte.

Je galère juste pour les ratio des zoom, pour avoir un dezoom = taille de l'image...
Je vais essayer de me renseigner sur les ratios adéquats.

Salut,

Au lieu de te baser sur la taille de l'image, tu peux te baser sur une taille arbitraire (que tu peux aussi associer par évènement à la taille de la fenêtre, ou l'écran, par exemple) : ainsi en facteur zoom=1, l'image, quelque soit sa taille, sera toujours affichée dans une taille déterminée (qui ne dépend pas de la taille de l'image). Autrement dit, comme drawImage(image, x, y, width, height) adapte l'affichage de l'image à la taille imposée par width et height, ces valeurs peuvent être n'importe quoi (>0 du moins).

Pour déterminer la taille arbitraire, il faut tout de même tenir compte de l'image : celle-ci n'étant pas forcément carrée, il faut déterminer l'une des dimensions relativement à la dimension correspondant de l'image, par facteur d'échelle de l'autre dimension par rapport celle correspondante de l'image, en fonction de celle qui est la plus grande (de manière à ce que la taille finale ne soit pas plus grande que les dimensions arbitraire). Ce qui donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // la taille de l'image int width = image.getWidth(); int height = image.getHeight(); // la taille arbitraire int fixedWidth=200; int fixedHeight=200; // la taille d'affichage de l'image pour le zoom facteur 1 int displayHeight; int displayWidth; if( height>width ) { displayHeight = fixedHeight; float scale = ((float)fixedHeight)/height; displayWidth = (int) (width * scale); } else { displayWidth = fixedWidth; float scale = ((float)fixedWidth)/width; displayHeight = (int) (height * scale); }
Et updateImageSize devient :
Code:

1 2 3 4 private void updateImageSize() { imageWidth=(int) (displayWidth*zoom); imageHeight=(int) (displayHeight*zoom); }
Tu peux, en plus, éventuellement ajuster les coordonnées x et y d'affichage de l'image pour quelle soit centrée.

24/03/2014, 09h44
Jokinou

Merci beaucoup pour ton aide :D ! j'ai réussit à faire ce que je voulais faire.

Je me pose une autre question qui n'a aucun rapport. Est-il possible de réaliser un drag and drop entre deux JFrames différentes ? J'aimerais déplacer un bouton d'une fenêtre à une autre.
Je n'y connait rien encore en drag and drop, mais je voulais savoir si c'étais possible en deux fenêtres avant de m'y lancer.
Merci d'avance.
24/03/2014, 10h42
joel.drigo

Oui, c'est possible de faire un drag and drop entre 2 fenêtres. On peut même le faire entre n'importe quoi et n'importe quoi (de graphique s'entend) : 2 composants de la même applications, 2 composants dans 2 applications différentes (dont l'une n'est pas forcément java, comme le bureau par exemple, ou ton navigateur)...
25/03/2014, 10h41
Jokinou

Aurais-tu un petit exemple ou l'on peut drag&drop un JButton dans un JPanel ? Un truc vraiment simple, je saurais m'adapter par la suite.
Parceque je ne trouve pas trop de d'exemple avec un bouton :( ...

edit : j'ai essayer de regarder pour un éventuel DnD entre deux JFrames, et je ne trouve absolument rien d'intéressant. Tu aurais qques pistes pour que je puisse avancer ?

edit : ah yes j'ai trouver un bel exemple : http://www.roseindia.net/java/exampl...rag-drop.shtml . Aller je vais le taffer un peu :D
25/03/2014, 15h44
joel.drigo

Peu importe la source ou la destination, le DND repose toujours sur le même principe :

- une source (DragSource)
- une cible (DropTarget)
- ce qu'on déplace (Transferable, avec la notion de DataFlavor pour typer ce qu'on déplace)

Ensuite, soit tu déplaces la source (par exemple, le JButton), soit tu déplaces un élément qui est dans la source (comme un item d'une JTable, quand la source est une JTable), soit tu déplaces n'importe quoi (un objet sur lequel tu as une référence). En fait, tu n'es même pas obligé de déplacer un objet "concret" : j'ai fait par exemple (en SWT, donc le code ne te servira pas à grand chose), une fonction de création de post-it, ou on drag à partir d'une image (qui représente un tas de post-its). L'objet que je transfère est toujours la même référence : un objet bidon que j'interprète comme une création de post-it au drop.
26/03/2014, 11h46
Jokinou

Merci pour ta réponse :).

J'ai encore un autre petit soucis de conception plutôt je pense.

Je souhaite, lorsque je click sur un bouton par exemple, cela change l'image en fond d'un panel.
Pour cela pour le moment j'appelle une méthode static du panel qui change la source de l'image en fond. Cependant, dans cette fonction static je ne peux pas faire de repaint() ou de revalidate() ( puisqu'elle est static ) . Du coup mon panel ne se rafraichit pas :oops: ....

A part passer en parametre de mon bouton le panel ( je trouve ça degueu mais c'est ptet la solution ), je vois pas comment faire. Quelle est la bonne façon de programmer ? Car avec Swing , les composants interagissent souvent avec d'autre composants..

edit : j'ai trouver une solution, tu me diras si c'est ce qu'il faut faire . J'ai mis ma frame principal en static et du coup j'appelle mon repaint dessus.

En principe, on devrait jamais utiliser static (sauf pour les constantes et la méthode main) : ça rend le code beaucoup plus souple/modulable, avec moins de liens en dur entre instances. Ensuite, il suffit de passer les références des instances que l'on a besoin de manipuler en paramètres (de constructeur ou de méthode).

Par exemple, en gros, tu pourrais avoir :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class MonPanel extends JPanel {
 
    public final static Image DEFAULT_IMAGE = ... // Constante
 
    private Image image = DEFAULT_IMAGE;
 
    public MonPanel(...) {
         ...
    }
 
    public void setImage(Image image) {   
        this.image=image;
        repaint(); // ou revalidate() si la taille du panel dépend de la taille de l'image
    }
 
 
}

Et dans la frame :

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
public class MaFrame extends JFrame {
 
     private MonPanel monPanel;
 
     public MaFrame(...) {
 
 
            ...
 
            monPanel = new MonPanel(...);
 
            ....
 
            button = new JButton("truc");
            button.addActionListener (new ActionListener() {
 
                  public void actionPerformed(ActionEvent event) {  
 
 
                        nouvelleImage = ...
 
                       monPanel.setImage( nouvelleImage );
 
                  }
 
            });
 
     }
 
 
 
}