Fading in an image on top of a jPanel - java

I want to have an image fade in onto a panel that is part of a card layout. When i'm at a certain place in the program, this panel will show on top and I then want the image to be loaded in with a fade-in effect.
This is a big project so I will only paste the relevant code.
I have a GUI class which contains the jFrame, all the jPanels etc. When a certain event is triggered, this code runs:
cardMain.show(pMain, "cLeprechaun");
FadeIn.run(pLeprechaun);
It loads up the correct panel and then runs a static method in the FadeIn class, that is supposed to add the image onto the panel pLeprechaun.
Here is the FadeIn class:
import java.awt.AlphaComposite;
import java.awt.Component;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;
public class FadeIn extends JPanel implements ActionListener {
Image imagem;
Timer timer;
private float alpha = 0f;
public FadeIn() {
imagem = new ImageIcon("darkforest.jpg").getImage();
timer = new Timer(100, this);
timer.start();
}
// here you define alpha 0f to 1f
public FadeIn(float alpha) {
imagem = new ImageIcon("darkforest.jpg").getImage();
this.alpha = alpha;
}
#Override
public void paintComponent(Graphics g) {
System.out.println("paint");
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,
alpha));
g2d.drawImage(imagem, 0, 0, null);
}
public static void run(JPanel jPanel) {
jPanel.add(new FadeIn());
}
public void actionPerformed(ActionEvent e) {
alpha += 0.05f;
if (alpha >1) {
alpha = 1;
timer.stop();
}
repaint();
}
}
Nothing happens, no image is show on the panel. Just to try it out, instead of jPanel.add(new FadeIn()); I have also tried to create a new jFrame and adding a new FadeIn onto that, and it works then. Of course, instead of an image being painted on the jPanel, a new jFrame pops up ontop of the main one, with the image nicely fading in. But that's not what I want happening.
Is there a way to solve this?

Er go:
assuming you have the following sequence of calls:
JFrame f=new JFrame();
f.setSize(500, 500);
JPanel j=new JPanel();
f.add(j);
f.setVisible(true);
FadeIn.run(j);
you need to change the size as follows:
public FadeIn(Dimension d) {
setSize(d);
.... // the rest of set up
}
then in run:
run(Jpanel jPanel) {
jPanel.add(new FadeIn(jPanel.getSize()));
}

Related

Can't load Image one time using getGraphics() method

Hi I'm new to java GUI Programming. I created Jframe(MainFrame) and add JPanel(OutPanel) Which has another Jpanel(InnerPanel). I try to achieve drawing Image in InnerPanel, not drawing OutPanel. I want OutPanel used to be just Container. So as you see TestA. I get Graphics from InnerPanel in OutPanel's paintComponent() which is overided method.
So finally I can draw using InnerPanel's Graphics in OutPanel's paintComponent() method. but It couldn't work well. It couldn't draw Image one time when program starts. when I hided window and shown again, the program shows image. Even though that is part of Image, not all Image.
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.image.BufferedImage;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class TestA{
private static Image image = GUI.loadImage("PlayerBoard.jpg");
public static void main(String[] args) {
TestA testA = new TestA();
}
public TestA() {
JFrame mainFrame = new JFrame("Main Frame");
mainFrame.setLayout(null);
mainFrame.setSize(500, 500);
mainFrame.setVisible(true);
mainFrame.setBackground(Color.black);
mainFrame.setLocation(800, 400);
OutPanel outPanel = new OutPanel();
mainFrame.getContentPane().add(outPanel);
mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
outPanel.repaint();
}
private class OutPanel extends JPanel {
JPanel innerPanel;
public OutPanel() {
this.setLayout(null);
this.setLocation(0, 0);
this.setSize(500, 50);
this.setBackground(Color.red);
innerPanel = new JPanel();
this.innerPanel.setSize(400, 50);
this.innerPanel.setVisible(true);
this.add(innerPanel);
}
#Override
protected void paintComponent(Graphics g) {
// TODO Auto-generated method stub
super.paintComponent(g);
int width = 500;
int height = 50;
BufferedImage resized = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB_PRE);
Graphics gBuffer = resized.createGraphics();
gBuffer.drawImage(TestA.image, 0, 0, width, height, this);
Graphics gPanel = innerPanel.getGraphics();
gPanel.drawImage(resized, 0, 0, width, height, this);
}
}
}
So I try diffrerent way(TestB). Only different thing is I just moved drawImage() method and getGraphics() thing to InnerPanel's paintComponent() from OutPanel's paintComponent(). Here's another Code TestB. and It works well.
Why this happens. Is it relates to context?. What is Context. and could I draw InnerPanel's Image in OutPanel?
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.image.BufferedImage;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class TestB {
private static Image image = GUI.loadImage("PlayerBoard.jpg");
public static void main(String[] args) {
TestB testB = new TestB();
}
public TestB() {
JFrame mainFrame = new JFrame("Main Frame");
mainFrame.setLayout(null);
mainFrame.setSize(500, 500);
mainFrame.setVisible(true);
mainFrame.setBackground(Color.black);
mainFrame.setLocation(800, 400);
OutPanel outPanel = new OutPanel();
mainFrame.add(outPanel);
outPanel.repaint();
}
private class OutPanel extends JPanel {
JPanel innerPanel;
public OutPanel() {
this.setLayout(null);
this.setLocation(0, 0);
this.setSize(500, 50);
this.setBackground(Color.red);
innerPanel = new InnerPanel(this);
this.innerPanel.setSize(500, 50);
this.innerPanel.setVisible(true);
this.add(innerPanel);
this.repaint();
}
}
private class InnerPanel extends JPanel {
OutPanel outPanel;
public InnerPanel(OutPanel outPanel) {
this.outPanel = outPanel;
}
#Override
protected void paintComponent(Graphics g) {
// TODO Auto-generated method stub
super.paintComponent(g);
int width = 500;
int height = 50;
Graphics2D g2d = (Graphics2D) g;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g.drawImage(TestB.image, 0, 0, width, height, this);
}
}
}
The paintComponent() method of a component is responsible for painting itself only. It should never know or care about any other component.
I want OutPanel used to be just Container.
Then do just that. Create the panel and set the layout manager for the outer panel and then add the outer panel to the JFrame.
Then create your inner panel and add it to the outer panel. Make sure you override the getPreferredSize() method of the inner panel so the layout manager of the outer panel can do its job.
Read the section from the Swing tutorial on Custom Painting for more information and working examples to start with.

java custom shaped frame using image [duplicate]

This question already has answers here:
Image/Graphic into a Shape
(3 answers)
Closed 8 years ago.
i like to create a java jframe look like this image.i have already crated jframes with different shapes like triangles ,circles ,polygons and some crazy shapes .but the problem it's too hard[99% impossible ] to create shape like this image.so how can i make a jframe like this.i used this code for create shaped window..
setUndecorated(true);
Polygon polygon = new Polygon();
polygon.addPoint(0, 0);
polygon.addPoint(100,100);
GeneralPath path = new GeneralPath();
path.append(polygon, true);
setShape(path);
now can i convert this image to a shape .then set setshapes.any idea?
or is there anyway to make jframe's fully transperent and jlable which hold image completely visible?
To make a transparent window, you need to set the frames background color's alpha to 0. This is probably the most counter intuitive call I've seen in a while, as if you do this to any other Swing component, you will completely screw up the paint process.
You don't want to change the opacity of the window, as it effectives the entire window and it's contents equally.
For example...
JWindow frame = new JWindow();
frame.setBackground(new Color(0, 0, 0, 0));
You don't have to use a JWindow, but this means I don't need to undecorate it myself...
You also need to make sure that whatever content you add to the window is transparent (opaque = false), so that it doesn't "hide" what's underneath it...
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JButton;
import javax.swing.JPanel;
import javax.swing.JWindow;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.CompoundBorder;
import javax.swing.border.EmptyBorder;
import javax.swing.border.LineBorder;
public class LeafWindow {
public static void main(String[] args) {
new LeafWindow();
}
public LeafWindow() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
}
JWindow frame = new JWindow();
frame.setBackground(new Color(0, 0, 0, 0));
frame.setContentPane(new LeafPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
frame.setAlwaysOnTop(true);
}
});
}
public class LeafPane extends JPanel {
private BufferedImage leaf;
public LeafPane() {
setBorder(new CompoundBorder(
new LineBorder(Color.RED),
new EmptyBorder(0, 0, 250, 0)));
try {
leaf = ImageIO.read(getClass().getResource("/Leaf.png"));
} catch (IOException ex) {
ex.printStackTrace();
}
setOpaque(false);
setLayout(new GridBagLayout());
JButton button = new JButton("Close");
button.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
System.exit(0);
}
});
add(button);
}
#Override
public Dimension getPreferredSize() {
return leaf == null ? new Dimension(200, 200) : new Dimension(leaf.getWidth(), leaf.getHeight());
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (leaf != null) {
Graphics2D g2d = (Graphics2D) g.create();
g2d.drawImage(leaf, 0, 0, this);
g2d.dispose();
}
}
}
}
This example deliberate adds a line border to the content as you can see what the original window bounds would be. It also uses a EmptyBorder to force the JButton onto the graphics, but this is just an example...
You'll have to create a shape based on your image. There are different threads here on SO that provide some way how to do this. The best one (based on the description, I didn't try it myself) might be Java - Create a shape from border around image. Another option for more complex images could be Image/Graphic into a Shape.
Another solution might be to use an undecorated frame along with "per-pixel transparency", as explained by Oracle here: http://docs.oracle.com/javase/tutorial/uiswing/misc/trans_shaped_windows.html

Java own components visually connecting per drag and drop

I'm working on a software solution for a small workflow editor. For this I created an own JPanel with some functionality like deleting itself or editing the main information.
This is how it looks:
The point is, that i need a dynamic connector like a arrow or something like that.
I tried it with drawline but its not dynamic and looks not well. I mean if I move one of the boxes so the drawed line have to change its position too.
The boxes in the big JPanel are movable and resizable. The connection point right and left are JButtons. The structure is that any outgoing connections startes from the right and incomes to the left JButton.
Any ideas how to set it up?
I can't post much of the source code, because the software is for a company.
Did you convert Graphics object to Graphics2D and set the RenderHints? i.e
Graphics2D g2d=(Graphics2D)g;
g2d.setRenderingHint(RenderHints.KEY_ANTIALIASING,RenderHints.VALUE_ANTIALIASING _ON);
This will add some nice anti aliasing effects and might make the line appearance straighter.
Also increasing the stroke width via Graphics2D#setStroke will make the jaggeder edges disappear as its now thicker.
See this example (press, drag and release mouse to create a line):
With g2d.setRenderingHint(..) and g2d.setStroke(..) within paintComponent(..) commented out:
With g2d.setRenderingHint(..) and g2d.setStroke(..) uncommented:
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Line2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class Test {
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
Test gui = new Test();
}
});
}
public Test() {
initComponents();
}
private void initComponents() {
JFrame frame = new JFrame("Line Demo");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new MyPanel());
frame.pack();
frame.setVisible(true);
}
}
class MyPanel extends JPanel {
Point point1;
Point point2;
Line2D line2d;
public MyPanel() {
addMouseListener(new MouseAdapter() {
#Override
public void mousePressed(MouseEvent me) {
super.mousePressed(me);
point1 = me.getPoint();
}
});
addMouseMotionListener(new MouseAdapter() {
#Override
public void mouseDragged(MouseEvent me) {
super.mouseDragged(me);
point2 = me.getPoint();
line2d = new Line2D.Double(point1, point2);
repaint();
}
});
}
#Override
public Dimension getPreferredSize() {
return new Dimension(300, 300);
}
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
//Set anti-alias!
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
if (point1 != null && point2 != null) {
g2d.setPaint(Color.RED);
g2d.setStroke(new BasicStroke(1.5f));//set stroke size
g2d.draw(line2d);
}
}
}
If above does not help, posting an SSCCE would enable us to test and see what could be at fault/make it better.

Java screenshot (using Robot and BufferedImage.getRGB)

I discovered the Robot class yesterday, and thought it was pretty cool. Today I wanted to experiment with it and see what was possible; so I decided I wanted to make a program that took a screenshot of the entire screen, and rendered out an image pixel by pixel on a JPanel. I have the program finished (two classes), but it isn't working and I can't find out why (I HAVE looked over the code a few times). Here's the code:
(FIRST CLASS)
import java.awt.AWTException;
import java.awt.FlowLayout;
import java.awt.Rectangle;
import java.awt.Robot;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import javax.swing.JFrame;
public class One {
public static void main(String[] args) {
BufferedImage screenCap = null;
Rectangle screenRect = new Rectangle(Toolkit.getDefaultToolkit().getScreenSize());
try {
screenCap = new Robot().createScreenCapture(screenRect);
Two imageRenderer = new Two(screenCap, screenRect);
imageRenderer.doRender();
JFrame frame = new JFrame();
frame.setVisible(true);
frame.setResizable(false);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new FlowLayout());
frame.add(imageRenderer);
frame.pack();
} catch (AWTException e) {
e.printStackTrace();
}
}
}
(SECOND CLASS)
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import javax.swing.JPanel;
public class Two extends JPanel {
private BufferedImage screenCap;
private Rectangle screenRect;
private Color pixelRGB;
//c1 and c2 are the x and y co-ordinates of the selected pixel.
private int c1, c2;
public Two(BufferedImage sC, Rectangle rect) {
screenCap = sC;
screenRect = rect;
setPreferredSize(new Dimension(rect.width, rect.height));
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
setBackground(Color.WHITE);
g.setColor(pixelRGB);
g.drawRect(c1, c2, 1, 1);
}
public void doRender() {
for(int i=0; i<screenRect.width; i++) {
for(int j=0; j<screenRect.height; j++) {
pixelRGB = new Color(screenCap.getRGB(i, j));
c1 = i;
c2 = j;
repaint();
}
}
}
}
I have googled around this problem to no avail.
Can anyone tell me what I'm doing wrong?
In order to make it work, just replace your paintComponent() method in your class Two with the following:
public void paintComponent(Graphics g) {
super.paintComponent(g);
setBackground(Color.WHITE);
g.drawImage(screenCap, 0, 0, getWidth(), getHeight(), null);
}
You can also get rid of the doRender() method.
Two should probably be an instance of a JLabel that is displaying screenCap. E.G.
import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
public class Screenshot {
public static void main(String[] args) throws Exception {
Rectangle screenRect = new Rectangle(
Toolkit.getDefaultToolkit().getScreenSize());
final BufferedImage screenCap =
new Robot().createScreenCapture(screenRect);
Runnable r = new Runnable() {
#Override
public void run() {
JOptionPane.showMessageDialog(null, new ImageIcon(screenCap));
}
};
SwingUtilities.invokeLater(r);
}
}
Drop it in a scroll pane if you wish to be really neat about it. Batteries not included.
In case it is not obvious: A JOptionPane uses a JLabel to render an ImageIcon.
Each time you repaint, you paint white over the whole panel, then do only a single pixel. So after each one, you'll only get one pixel. It also shouldn't be necessary to call repaint many times. In fact, when you call repaint, it does not immediately actually call paintComponent. It simply submits a request to repaint, which swing will eventually do. And it might not be one-to-one. E.g., many calls to repaint might result in only one call to paintComponent. You should try to write code so that a single call to paintComponent will completely display the component.
To do this, you can use g.drawImage to display a BufferedImage. See this post for more information on displaying an image in a JPanel.

Zooming a JLabel by overriding paintComponent ()

Consider this small runnable example:
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.MouseWheelEvent;
import java.awt.event.MouseWheelListener;
import java.util.ArrayList;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
public class Test2 extends JFrame implements MouseWheelListener{
ArrayList<JLabel> lista = new ArrayList<JLabel>();
JPanel p;
double d = 0.1;
Test2(){
p=new JPanel();
_JLabel j = new _JLabel("Hello");
j.setOpaque(true);
j.setBackground(Color.yellow);
p.add(j);
p.setBackground(Color.blue);
add(p);
this.setVisible(true);
this.setSize(400,400);
addMouseWheelListener(this);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String args[]){
new Test2();
}
private class _JLabel extends JLabel{
_JLabel(String s){
super(s);
}
protected void paintComponent(Graphics g) {
d+=0.01;
Graphics2D g2d = (Graphics2D) g;
g2d.scale(d, d);
setMaximumSize(null);
setPreferredSize(null);
setMinimumSize(null);
super.paintComponent(g2d);
System.out.println("d= " +d);
}
}
public void mouseWheelMoved(MouseWheelEvent e) {
this.repaint();
}
}
When I scroll the mousewheel the JLabel increases in size and the variable d is printed out. However, when it reaches the actual size (d=1) only the text continues zooming. How can I make the background continue to zoom?
You shouldn't be modifying the preferred/min/max sizes in the paint method, this coud have unexpected results (cause another repaint).
The problem is that the parent layout has no reference from which to determine size of the component. That is, the preferred/in/max size is actually calculated based on the font information & this information is not been changed.
So, while it "appears" that the component is being resized, it's actual size has not changed.
Try instead to scale against the original font size.
AffineTransformation af = AffineTranfrmation.getScaleInstance(scale, scale);
Font font = originalFont.deriveFont(af);
setFont(font);
invalidate();
repaint();
Of course you run into the problem of what happens if the user changes the font, but with a little bit of flagging, you should be able to over come that

Categories

Resources