Adapt an image in realtime in a JPanel

Question

I've been looking for a solution for 2 hours, so I eventually ask it.

I simply need to overlap a grid on a picture. My grid adapts automatically its size to my JPanel but not my picture. Here are my codes:

Class for the grid:

public class GridPane extends JPanel {

    public GridPane(int row, int col) {

    int count = 0 ; // use to give a name to each box so that you can refer to them later
    setLayout(new GridLayout(row, col));
    setBorder(BorderFactory.createEmptyBorder(2,2,2,2));
    setOpaque(false);
    for (int i = 1; i <= (row * col); i++) {
        JPanel pan = new JPanel();

        pan.setEnabled(true);
        pan.setOpaque(false);
        pan.setPreferredSize(new Dimension(1, 1));
        pan.setBorder(BorderFactory.createLineBorder(Color.BLACK));
        pan.addMouseListener(new BoxListener()); // add a mouse listener to make the panels clickable
        pan.setName(count+"");
        ++count;
        add(pan);
    }
}

My class for the JFrame:

public class FenetreCluedo extends JFrame {

private JPanel fenetre;
private JPanel plateau = new JPanel();
private JTextField resume = new JTextField(40);
private BufferedImage img;
public FenetreCluedo() {
    super("Cluedo");
    try {
        img = ImageIO.read(new File("/home/thomas/eclipse-workspace/Cluedo-GM4/src/cluedo1.png"));
    } catch (IOException e) {};

    fenetre = (JPanel)this.getContentPane();
    fenetre.setLayout(new BorderLayout());

    fenetre.add(plateau, BorderLayout.CENTER);
    plateau.setLayout(new OverlayLayout(plateau));

    plateau.add(new GridPane(22,22));
    plateau.add(new JLabel(new ImageIcon("/home/thomas/eclipse-workspace/Cluedo-GM4/src/cluedo1.png")));
    fenetre.add(resume, BorderLayout.EAST);

    pack();
    setVisible(true);
}
}

When I resize my window, the grid adapts itself so it's entirely displayed. But not the picture, which is cut ...

Any solution?

See solution [here](https://stackoverflow.com/a/28545215/3992939). Another option [here](http://www.java2s.com/Tutorials/Java/Swing_How_to/JPanel/Scale_image_as_with_JPanel.htm) — c0der, Dec 15 '18 at 17:45

score 0 · Accepted Answer · answered Dec 15 '18 at 18:17

You need to override the painting of the image:

JPanel imagePanel = new JPanel() {
    private static final long serialVersionUID = 1;

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(img, 0, 0, getWidth(), getHeight(), this);
    }

    @Override
    public Dimension getPreferredSize() {
        return new Dimension(img.getWidth(), img.getHeight());
    }
};

// ...

plateau.add(new GridPane(22,22));
plateau.add(imagePanel);

You can add rendering hints for smoother scaling, though it may impact performance on older systems which lack accelerated graphics.

JPanel imagePanel = new JPanel() {
    private static final long serialVersionUID = 1;

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);

        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(
            RenderingHints.KEY_RENDERING,
            RenderingHints.VALUE_RENDER_QUALITY);
        g2.setRenderingHint(
            RenderingHints.KEY_INTERPOLATION,
            RenderingHints.VALUE_INTERPOLATION_BICUBIC);
        g2.setRenderingHint(
            RenderingHints.KEY_ALPHA_INTERPOLATION,
            RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);

        g.drawImage(img, 0, 0, getWidth(), getHeight(), this);
    }
};

Adapt an image in realtime in a JPanel

1 Answers1