JScrollPane resizing component in Viewport

[Rachel Swailes]

Hi there

I am using a JScrollPane to show a picture that I can zoom into and zoom out of using separate buttons.

When I zoom out of the image and make the image smaller than the Viewport, the image goes smaller for a second and then resizes to fit exactly into the Viewport.

I see in the API that

By default JScrollPane uses ScrollPaneLayout to handle the layout of its child Components. ScrollPaneLayout determines the size to make the viewport view in one of two ways:

If the view implements Scrollable a combination of getPreferredScrollableViewportSize, getScrollableTracksViewportWidth and getScrollableTracksViewportHeightis used, otherwise
getPreferredSize is used.

I had to make my own component to put the image on, and that has a getPreferredSize() method. And I don't know how to make the view implement Scrollable.

Does anyone have any suggestions to help fix this?

Cheers,
Rachel



(When the image is larger than the scroll pane, the behaviour is as expected and the scrollbars appear so that I can move to see the hidden parts of the image.)

[Craig Wood]

Sounds like you're on the right track. Return the desired Dimension from getPreferredSize and then ask the JScrollPane to update its view with a call to revalidate on the view (your custom) component.

In this demo I return the actual (scaled) image size. You could include padding in one or both dimensions if you like.

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.*;
 
public class Scaling
{
    public static void main(String[] args)
    {
        ImageScalingPanel imagePanel = new ImageScalingPanel();
        ImageZoomer zoomer = new ImageZoomer(imagePanel);
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(zoomer.getUIPanel(), "North");
        f.getContentPane().add(new JScrollPane(imagePanel));
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    }
}
 
class ImageScalingPanel extends JPanel
{
    BufferedImage image;
    double scale, zoomInc;
 
    public ImageScalingPanel()
    {
        loadImage();
        scale = 1.0;
        zoomInc = 0.01;
        setBackground(Color.white);
    }
 
    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();
        double imageWidth = scale * image.getWidth();
        double imageHeight = scale * image.getHeight();
        double x = (w - imageWidth)/2;
        double y = (h - imageHeight)/2;
        AffineTransform at = AffineTransform.getTranslateInstance(x, y);
        at.scale(scale, scale);
        g2.drawRenderedImage(image, at);
    }
 
    public void setScale(int direction)
    {
        scale += direction * zoomInc;
        revalidate();
        repaint();
    }
 
    public Dimension getPreferredSize()
    {
        int
            w = (int)(scale * image.getWidth()),
            h = (int)(scale * image.getHeight());
        return new Dimension(w, h);
    }
 
    private void loadImage()
    {
        String fileName = "images/cougar.jpg";
        try
        {
            URL url = getClass().getResource(fileName);
            image = ImageIO.read(url);
        }
        catch(MalformedURLException mue)
        {
            System.out.println("url: " + mue.getMessage());
        }
        catch(IOException ioe)
        {
            System.out.println("read: " + ioe.getMessage());
        }
    }
}
 
class ImageZoomer
{
    ImageScalingPanel scalingPanel;
 
    public ImageZoomer(ImageScalingPanel isp)
    {
        scalingPanel = isp;
    }
 
    public JPanel getUIPanel()
    {
        final JButton
            zoomIn = new JButton("zoom in"),
            zoomOut = new JButton("zoom out");
        ActionListener l = new ActionListener()
        {
            int inc;
 
            public void actionPerformed(ActionEvent e)
            {
                JButton button = (JButton)e.getSource();
                if(button == zoomIn)
                    inc = 1;
                else
                    inc = -1;
                scalingPanel.setScale(inc);
            }
        };
        zoomIn.addActionListener(l);
        zoomOut.addActionListener(l);
        JPanel panel = new JPanel();
        panel.add(zoomIn);
        panel.add(zoomOut);
        return panel;
    }
}

[Rachel Swailes]

Thanks Craig! That was exactly what I was looking for.

I think that the biggest problem with my version was that the code in getPreferredSize wasn't working as I expected it to.

I am so happy that this is finally resolved!

Thanks again!
Rachel

[Rachel Swailes]

I have read your code through and through but I can't see how you have managed to keep the component centered before the scrollbars come in. I have a feeling that it should be in the paintComponent but I don't see it. Which piece of code is controlling that?

Cheers,
Rachel

[Craig Wood]

This code in paintComponent centers the image in the component

        double x = (w - imageWidth)/2;
        double y = (h - imageHeight)/2;

Set x and y equal to zero and see what happens.

[Rachel Swailes]

Excellent, looking at it now it seems so clear...

Thanks,
Rachel