AlphaComposite Transparency with repaint overlaps into black
So I have an image on top of another panel, and that image is transparent so you can see the panel beneath it. What I'm trying to do is use repaint() to fade the image (which is drawn with the drawImage() method in java.awt.Graphics) out until it is completely transparent so you can see the panel beneath it clearly. As of now, the image is just fading into black instead of into a transparent texture.
This is a little bit of my code right now:
paintComponent method:
public void paintComponent(Graphics g)
{
super.paintComponent(g);
float alpha = 1f-(.01f*(float)opcounter);
Graphics2D g2d = (Graphics2D)g;
g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_IN, alpha);
g2d.drawImage(img, 0, 0, null);
}
actionPerformed method that is called for the timer
public void actionPerformed(ActionEvent e)
{
opcouner++;
panel.repaint();
}
Longer (uncondensed) version of my code: (including paintComponent and Mover class for timer)
public void paintComponent(Graphics g)
{
super.paintComponent(g);
Dimension framesize = frame.getSize();
this.setBounds(0,0,framesize.width, framesize.height-61);
if (buff)
{
//this.add(buffer);
if (opcounter <= 255)
{
buffer.setForeground(new Color(250, 250, 250, 0+opcounter));
}
else
{
opcounter = 0;
buff = false;
hand = true;
}
}
if (hand)
{
this.add(handson);
if (opcounter <= 255)
{
handson.setForeground(new Color(250, 250, 250, 0+opcounter));
}
else
{
opcounter = 0;
hand = false;
log = true;
}
}
if (log)
{
this.add(logic);
if (opcounter <= 255)
{
logic.setForeground(new Color(250, 250, 250, 0+opcounter));
}
else
{
opcounter = 0;
log = false;
pan = true;
}
}
if (pan)
{
this.add(panic);
if (opcounter <= 255)
{
panic.setForeground(new Color(250, 250, 250, 0+opcounter));
}
else
{
opcounter = 0;
pan = false;
first = false;
second = true;
try
{
//Thread.sleep(2000);
}
catch(Exception e)
{
System.out.println("thread not slept");
}
System.out.println("opcounter = " + opcounter);
black.setVisible(false);
handson.setVisible(false);
logic.setVisible(false);
panic.setVisible(false);
tutpic = true;
}
}
if (tutpic)
{
if (opcounter <= 200)
{
Graphics2D g2d = (Graphics2D)g.create();
float alpha = 1f-(.01f*(float)opcounter);
g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_IN, alpha));
g2d.drawImage(tut, 0, 0, null);
g2d.dispose();
}
else
{
opcounter = 0;
tutpic = false;
}
}
}
class Mover implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
if (!tutpic)
opcounter+=4;
else
{
opcounter++;
}
tutorial.repaint();
}
}
Any help would be appreciated. Thanks!
Answer
You need to restore the state of the Graphics context BEFORE the paintComponent method exists. This is very important, as the Graphics context is a shared resource, all the components that need to be updated will be given the same Graphics, so now every thing after you component is painted will share the some AlphaComposite...
A better solution would be to create temporary copy of the Graphics context, apply what ever settings you want to it and dispose of it after you have finished. This will ensure that what ever changes you make to the Graphics context won't be carried on after the method exists...
public void paintComponent(Graphics g)
{
super.paintComponent(g);
float alpha = 1f-(.01f*(float)opcounter);
// Create your own copy...
Graphics2D g2d = (Graphics2D)g.create();
g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_IN, alpha);
g2d.drawImage(img, 0, 0, null);
// Don't forget to dispose of it
g2d.dispose();
}
Remember, you create it, you dispose it!
Update
Try using AlphaComposite.SRC_OVER instead...
import java.awt.AlphaComposite;
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class TestFadeOut {
public static void main(String[] args) {
new TestFadeOut();
}
public TestFadeOut() {
EventQueue.invokeLater(
new Runnable() {
@Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new BorderLayout());
frame.add(new TestPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class TestPane extends JPanel {
private float alpha = 1f;
private float diff = -0.02f;
private BufferedImage img;
public TestPane() {
try {
img = ImageIO.read(new File("C:\\Users\\swhitehead\\Documents\\My Dropbox\\Ponies\\url.png"));
Timer timer = new Timer(40, new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
alpha += diff;
if (alpha < 0) {
diff *= -1;
alpha = diff;
} else if (alpha > 1f) {
diff *= -1;
alpha = 1f + diff;
}
repaint();
}
});
timer.setRepeats(true);
timer.setCoalesce(true);
timer.start();
} catch (IOException ex) {
ex.printStackTrace();
}
}
@Override
public Dimension getPreferredSize() {
return img == null ? super.getPreferredSize() : new Dimension(img.getWidth(), img.getHeight());
}
@Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (img != null) {
Graphics2D g2d = (Graphics2D) g.create();
g2d.setComposite(AlphaComposite.SrcOver.derive(alpha));
int x = getWidth() - img.getWidth();
int y = getHeight() - img.getHeight();
g2d.drawImage(img, x, y, this);
g2d.dispose();
}
}
}
}
Have a look at Composting Graphics for more details...