Random text showing on JButton when changing background to translucent color

90 Views Asked by At

If I change my JButton to have a translucent color (0 < alpha < 1), I get wonky results for my JButton text.


package Paint;

import javax.swing.*;
import java.awt.*;
import java.awt.image.*;

public class GUI
{

   public GUI()
   {
   
      final JFrame frame = new JFrame();
   
      frame.setTitle("Paint");
      frame.setLocationByPlatform(true);
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   
      frame.add(createMainPanel());
   
      frame.pack();
      frame.setVisible(true);
      
      // System.out.println(JColorChooser.showDialog(null, "Choose a color", null, true));
   
   }
   
   private static JPanel createMainPanel()
   {
   
      final JPanel mainPanel = new JPanel(new BorderLayout());
      
      final JPanel topPanel = GUI.createTopPanel();
      
      mainPanel.add(topPanel, BorderLayout.NORTH);
      
      return mainPanel;
   
   }
   
   private static JPanel createTopPanel()
   {
   
      final JPanel topPanel = new JPanel();
      topPanel.setLayout(new BoxLayout(topPanel, BoxLayout.LINE_AXIS));
      
      topPanel.add(GUI.createColorChooserPanel());
      
      return topPanel;
   
   }
   
   private static JPanel createColorChooserPanel()
   {
   
      final int NUM_ROWS = 3;
      final int NUM_COLUMNS = 3;
      final String DIALOG_TITLE = "Choose a color";
      final java.util.List<Character> KEY_LIST = 
         java.util.List.of('U', 'I', 'O', 'H', 'J', 'K', 'B', 'N', 'M');
   
      final JPanel colorChooserPanel = new JPanel(new GridLayout(NUM_ROWS, NUM_COLUMNS));
      
      for (int index = 0; index < NUM_ROWS * NUM_COLUMNS; index++)
      {
      
         final JButton button = new JButton("" + KEY_LIST.get(index));
         button.setFont(button.getFont().deriveFont(20.0f));
         button.setOpaque(true);
         button
            .addActionListener
            (
               event -> 
                  button
                     .setBackground
                     (
                        JColorChooser
                           .showDialog
                           (
                              button, 
                              DIALOG_TITLE, 
                              button.getBackground(), 
                              true
                           )
                     )
            );
      
         colorChooserPanel.add(button);
      
      }
      
      return colorChooserPanel;
   
   }

}

Click on the center button, select a color, go to RGB tab, change alpha to be within the above mentioned range, then click ok. Then, hover mouse all over the buttons rapidly. You should wonky results like garbled text.

Here's a few photos of the wonky results in action.

BEFORE

CLICKED ON THE CENTER BUTTON, THEN SELECTED A COLOR

CLICKED ON THE RGB TAB, THEN CHANGED THE ALPHA VALUE

CLICKED OK, AND NOW THE JBUTTON HAS A WONKY BACKGROUND

MORE

Moving my mouse between the center buttons and the other buttons seems to change the text of the center button.

EDIT - I am building a clone of Microsoft Paint, and this particular piece of functionality is to recreate the color chooser on the top right of the following screenshot. Like this.

I plan to use JColorChooser.showDialog(Component, String title, Color) as a popup for the user to select their color. But once they do, I want to bring that color back down to the component they clicked on (currently a JButton), so that they can see and select it next time.

EDIT 2 - Here is what happens if I set alpha to be 0.

CHOOSING COLOR WITH ALPHA OF 0

THE RESULTS -- SAME PROBLEM, DIFFERENT SHADE OF COLOR

0

There are 0 best solutions below