How can I draw an Image onto another Image in the JDialog Window using Key Listener in Java?

Question

• TL;DR:

App currently looks like IMAGE1, I want to show another .png file after key press, so it looks like in IMAGE2. How can I draw second image on my background image?

• Detailed problem description:

I run into trouble when trying to draw one image on top of another.

I have a Background Image loaded and it is visible in my JDialog window:

I also implemented Window, Mouse and Key Listeners for my Window, so it for example closes when mouse leaves the Window or when mouse is clicked - works perfectly.

But I want to show another image (small icon in the left upper corner of the window) when user presses particular key (key listener also already works), so it looks more or less like this:

It is also possible that I'll need to show more icons later on, but the problem is, that after I draw one Image, the other one is invisible (and looks like in image 1). Could you please guide me how can I achieve such effect? Maybe I should not be using conentPane at all?

• Main Window Code:

   public class MychoWindow extends JDialog {
  
      private Container contentPane = this.getContentPane();
  
   (... variables etc ...)
  
      public MychoWindow() {
  
         // Set the main properties of the Window:
         setTitle(WINDOW_TITLE);
         setSize(WINDOW_WIDTH, WINDOW_HEIGHT);
         setResizable(false);
         setDefaultCloseOperation(JDialog.DISPOSE_ON_CLOSE);
  
         // Draw the background image:
         drawBackgroundImage();
         //  drawCatDefenseIcon();
  
         // Show the Window:
         centerWindowOnTheScreen();
         setVisible(true);
  
         // Set starting Variables:
         setWindowCenterX(getLocationOnScreen().x + WINDOW_WIDTH / 2);
         setWindowCenterY(getLocationOnScreen().y + WINDOW_HEIGHT / 2);
  
         // Add various Listeners:
         addWindowListener(new WindowListener());
         addMouseListener(new MouseListener());
         addKeyListener(new KeyboardListener());
  
      }
   }
  

• Background Drawing Method:

   private void drawBackgroundImage() {
  
      // Load Image from file:
      ImageIcon imageIcon = new ImageIcon(MychoWindow.class.getResource(BACKGROUND_IMAGE_URL));
  
      // Transform it to Image to be able to resize it, and then transform it back to use it in JLabel:
      Image image = imageIcon.getImage();
      Image newimg = image.getScaledInstance(WINDOW_WIDTH - IMAGE_FRAME_SIZE, WINDOW_HEIGHT - IMAGE_FRAME_SIZE,  java.awt.Image.SCALE_SMOOTH); // scale it the smooth way
      imageIcon = new ImageIcon(newimg);
  
      // Add prepared image to the Label which is added to content pane:
      JLabel label = new JLabel(imageIcon);
  
      // Add it to container:
      contentPane.add(label);
  }
  

• Icon Drawing Method:

   public void drawCatDefenseIcon() throws IOException {
  
      // TODO: SOMEHOW MAKE IT WORK
        (I tried to use the BufferedImage and Graphics2d here,
         I also tried the approach from above - drawBackgroundImage() method,
         but I just could not get it to work.)
   }
  

• Key Listener - Just in case:

   public class KeyboardListener extends KeyAdapter {
  
      @Override
      public void keyReleased(KeyEvent event) {
  
         if (event.getKeyCode() == KeyEvent.VK_K || event.getKeyCode() == KeyEvent.VK_C) {
  
            MychoWindow.setCatDefenseState(!MychoWindow.getCatDefenseState());
  
            System.out.println("SHOW THAT KEY WAS PRESSED");
         }
      }
   }
  

What is the best approach to achieve effect visible on attached IMAGE2?

Thank you in advance!

Answer 1

One approach is to add a second label to the background label.

Something like:

JLabel background = new JLabel( new ImageIcon(...) );
background.setLayout( new FlowLayout() );

Then later when you want to add the second Icon you use:

JLabel onTop = new JLabel( new ImageIcon(...) );
background.removeAll();
background.add( onTop );
background.revalidate();

Another approach could be to replace the existing Icon with a Compound Icon.

Then the logic might be something like:

Icon original = background.getIcon();
Icon onTop = new ImageIcon(...);
CompoundIcon icon = new CompoundIcon(CompoundIcon.Axis.Z_AXIS, 0, CompoundIcon.LEFT, CompoundIcon.TOP, original, onTop);
background.setIcon( icon );