Draw in an image inside panel

Question

I have a panel with two buttons. I'm trying to insert an image inside the panel and I want to draw lines inside the image after clicking on a button. I have used the below code but this doesn't seem to work.

public class Try_Panel extends JFrame {
  // start attributes
  private JPanel jPanel1 = new JPanel(null, true);
  private JButton jButton1 = new JButton();
  private JButton jButton2 = new JButton();
  // end attributes

  public Try_Panel(String title) {
    // Frame-Init
    super(title);
    setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
    int frameWidth = 300; 
    int frameHeight = 300;
    setSize(frameWidth, frameHeight);
    Dimension d = Toolkit.getDefaultToolkit().getScreenSize();
    int x = (d.width - getSize().width) / 2;
    int y = (d.height - getSize().height) / 2;
    setLocation(x, y);
    setResizable(false);
    Container cp = getContentPane();
    cp.setLayout(null);
    // start components

    jPanel1.setBounds(48, 24, 209, 145);
    jPanel1.setOpaque(false);
    cp.add(jPanel1);
    jButton1.setBounds(88, 208, 75, 25);
    jButton1.setText("jButton1");
    jButton1.setMargin(new Insets(2, 2, 2, 2));
    jButton1.addActionListener(new ActionListener() { 
      public void actionPerformed(ActionEvent evt) { 
        jButton1_ActionPerformed(evt);
      }
    });
    cp.add(jButton1);
    jButton2.setBounds(184, 208, 75, 25);
    jButton2.setText("jButton2");
    jButton2.setMargin(new Insets(2, 2, 2, 2));
    jButton2.addActionListener(new ActionListener() { 
      public void actionPerformed(ActionEvent evt) { 
        jButton2_ActionPerformed(evt);
      }
    });
    cp.add(jButton2);
    // end components

    setVisible(true);
  } // end of public Try_Panel

  // start methods
  public void jButton1_ActionPerformed(ActionEvent evt) {
      BufferedImage image=new BufferedImage(jPanel1.getWidth(), jPanel1.getHeight(), BufferedImage.TYPE_3BYTE_BGR);
        JLabel l=new JLabel(new ImageIcon(image));
        Graphics graphics = image.getGraphics();
        Graphics2D g = (Graphics2D) graphics;
        g.fillRect(0, 0, image.getWidth(), image.getHeight());
        g.setColor(Color.BLUE);
        g.drawLine(0, 0, 300, 400);
        jPanel1.add(l);
  } // end of jButton1_ActionPerformed

  public void jButton2_ActionPerformed(ActionEvent evt) {
    // TODO add your code here
  } // end of jButton2_ActionPerformed

  // end methods

  public static void main(String[] args) {
    new Try_Panel("Try_Panel");
  } // end of main

} // end of class Try_Panel

The biggest problem is the same code worked in my other class.

Answer 1

Try wrapping the image inside the ImageIcon AFTER you have updated it. Also, you should also call Graphics#dispose when you are finished rendering to the graphics context.

public void jButton1_ActionPerformed(ActionEvent evt) {
    BufferedImage image=new BufferedImage(jPanel1.getWidth(), jPanel1.getHeight(), BufferedImage.TYPE_3BYTE_BGR);
    Graphics2D g = image.createGraphics();
    g.fillRect(0, 0, image.getWidth(), image.getHeight());
    g.setColor(Color.BLUE);
    g.drawLine(0, 0, 300, 400);
    g.dispose();
    JLabel l=new JLabel(new ImageIcon(image));
    jPanel1.add(l);
}

You should also rely on the layout managers rather the trying to do it yourself, it will simply make your life easier.

Personally, I think it would easier to paint directly to a custom component, like JPanel. Check out Performing Custom Painting for more details

UPDATED with example

Basically, I changed your example to

1. Use layout managers
2. Load the UI within the context of the EDT
3. revalidate the jPanel1

public class BadLabel extends JFrame {
    // start attributes

    private JPanel jPanel1 = new JPanel(new BorderLayout(), true);
    private JButton jButton1 = new JButton();
    private JButton jButton2 = new JButton();
    // end attributes

    public BadLabel(String title) {
        // Frame-Init
        super(title);
        setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
        int frameWidth = 300;
        int frameHeight = 300;
        setSize(frameWidth, frameHeight);
        Dimension d = Toolkit.getDefaultToolkit().getScreenSize();
        int x = (d.width - getSize().width) / 2;
        int y = (d.height - getSize().height) / 2;
        setLocation(x, y);
//        setResizable(false);
        Container cp = getContentPane();
//        cp.setLayout(null);
        // start components

//        jPanel1.setBounds(48, 24, 209, 145);
        jPanel1.setOpaque(true);
        jPanel1.setBackground(Color.RED);
        cp.add(jPanel1);

        JPanel buttons = new JPanel();
//        jButton1.setBounds(88, 208, 75, 25);
        jButton1.setText("jButton1");
        jButton1.setMargin(new Insets(2, 2, 2, 2));
        jButton1.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent evt) {
                jButton1_ActionPerformed(evt);
            }
        });
        buttons.add(jButton1);
//        jButton2.setBounds(184, 208, 75, 25);
        jButton2.setText("jButton2");
        jButton2.setMargin(new Insets(2, 2, 2, 2));
        jButton2.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent evt) {
                jButton2_ActionPerformed(evt);
            }
        });
        buttons.add(jButton2);
        // end components

        cp.add(buttons, BorderLayout.SOUTH);

        setVisible(true);
    } // end of public BadLabel

    // start methods
    public void jButton1_ActionPerformed(ActionEvent evt) {
        BufferedImage image = new BufferedImage(jPanel1.getWidth(), jPanel1.getHeight(), BufferedImage.TYPE_3BYTE_BGR);
        Graphics2D g = image.createGraphics();
        g.fillRect(0, 0, image.getWidth(), image.getHeight());
        g.setColor(Color.BLUE);
        g.drawLine(0, 0, 300, 400);
        g.dispose();
        JLabel l = new JLabel(new ImageIcon(image));
        l.setBorder(new LineBorder(Color.BLUE));
        jPanel1.add(l);
        jPanel1.revalidate();
    } // end of jButton1_ActionPerformed

    public void jButton2_ActionPerformed(ActionEvent evt) {
        // TODO add your code here
    } // end of jButton2_ActionPerformed

    // end methods
    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (Exception exp) {
                }
                new BadLabel("BadLabel");
            }
        });
    } // end of main
} // end of class BadLabel}

Answer 2

Something like this:

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.border.EmptyBorder;

public class Try_Panel {
    // start attributes

    private JButton jButton1 = new JButton("jButton1");
    private JButton jButton2 = new JButton("jButton2");
    private JLabel imageView;
    BufferedImage image;
    int x = 300;
    int y = 50;
    // end attributes

    public Component getGui() {
        JPanel gui = new JPanel(new BorderLayout(5, 5));
        gui.setBorder(new EmptyBorder(3, 3, 3, 3));

        image = new BufferedImage(300, 100, BufferedImage.TYPE_INT_RGB);
        imageView = new JLabel(new ImageIcon(image));

        gui.add(imageView, BorderLayout.CENTER);

        JPanel buttons = new JPanel(new FlowLayout(FlowLayout.CENTER, 15, 15));
        gui.add(buttons, BorderLayout.PAGE_END);

        jButton1.setMargin(new Insets(2, 2, 2, 2));
        jButton1.addActionListener(new ActionListener() {

            public void actionPerformed(ActionEvent evt) {
                jButton1_ActionPerformed(evt);
            }
        });
        buttons.add(jButton1);

        jButton2.setMargin(new Insets(2, 2, 2, 2));
        jButton2.addActionListener(new ActionListener() {

            public void actionPerformed(ActionEvent evt) {
                jButton2_ActionPerformed(evt);
            }
        });
        buttons.add(jButton2);
        // end components

        return gui;
    }

    public static void main(String[] args) {
        Runnable r = new Runnable() {
            public void run() {
                // Frame-Init
                JFrame f = new JFrame("Try Panel");
                f.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
                f.setLocationByPlatform(true);
                Container cp = f.getContentPane();
                cp.setLayout(new BorderLayout(3, 3));

                Try_Panel tp = new Try_Panel();
                cp.add(tp.getGui());

                f.pack();
                f.setMinimumSize(f.getSize());
                f.setVisible(true);
            }
        };
        SwingUtilities.invokeLater(r);
    } // end of public Try_Panel

    // start methods
    public void jButton1_ActionPerformed(ActionEvent evt) {
        Graphics graphics = image.getGraphics();
        Graphics2D g = (Graphics2D) graphics;
        g.setColor(Color.RED);
        g.drawLine(0, 0, x, y);
        x -= 4;
        y += 2;
        g.dispose();

        imageView.repaint();
    } // end of jButton1_ActionPerformed

    public void jButton2_ActionPerformed(ActionEvent evt) {
        // TODO add your code here
    } // end of jButton2_ActionPerformed
} // end of class Try_Panel