I'm building a board game and I have a grid with empty circles.
I created my own template (.png) of a single empty circle in photoshop and added it repeatedly (using a loop and layout manager) and used it to create multiple buttons and laid them out on a panel.
I created custom circular tokens (.png) in photoshop as well which will then sort of "fill up" or take the empty space in the circles upon the occurrence of an event. I hope you get what I mean.
I'm not entirely certain that using paint() is the only way to do this.
Could anyone drop a few hints on how I can achieve this? I'm new to GUI.
This is what my grid looks like:
And those empty white spaces are the spaces that the tokens I created will have to take up, but I'm not sure ho I will do that aside from familiarizing myself with paint()
This is the .png file that will "fill up" the empty spaces when the user clicks on a button
Have a look over this for ideas. It combines the 2 images for the 'final logic' look:
I couldn't be bothered waiting for the transparent template, so I made my own. ;)
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
import java.net.URL;
import javax.imageio.ImageIO;
class GameGrid {
public static BufferedImage getImage(BufferedImage image, boolean fill) {
int pad = 4;
BufferedImage temp = new BufferedImage(
image.getWidth()+2*pad,
image.getHeight()+2*pad,
BufferedImage.TYPE_INT_ARGB);
Graphics2D g = temp.createGraphics();
g.setColor(Color.MAGENTA.darker());
Ellipse2D.Double ellipse = new Ellipse2D.Double(
pad, pad, image.getWidth(), image.getHeight());
Rectangle2D.Double outline = new Rectangle2D.Double(
0, 0, image.getWidth()+(2*pad), image.getHeight()+(2*pad));
Area a = new Area(outline);
a.subtract(new Area(ellipse));
if (fill) {
g.drawImage(image,pad,pad,null);
}
g.setClip(a);
g.fillRect(0, 0, image.getWidth()+(2*pad), image.getHeight()+(2*pad));
g.dispose();
return temp;
}
public static void main(String[] args) throws Exception {
URL url = new URL("http://i.stack.imgur.com/t5MFE.png");
BufferedImage image = ImageIO.read(url);
final BufferedImage img1 = getImage(image, true);
final BufferedImage img2 = getImage(image, false);
Runnable r = new Runnable() {
#Override
public void run() {
JPanel gui = new JPanel(new GridLayout(0,3));
ActionListener al = new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
JButton b = (JButton)e.getSource();
b.setIcon(new ImageIcon(img2));
}
};
for (int ii=0; ii<9; ii++) {
JButton b = new JButton(new ImageIcon(img1));
b.setBackground(Color.RED);
//b.setContentAreaFilled(false);
b.setBorder(null);
b.addActionListener(al);
gui.add(b);
}
JOptionPane.showMessageDialog(null, gui);
}
};
// Swing GUIs should be created and updated on the EDT
// http://docs.oracle.com/javase/tutorial/uiswing/concurrency
SwingUtilities.invokeLater(r);
}
}
Related
I noticed that every JFrame I create doesnt show a few pixels - ~10px at the right side.
I dont know why that happens, but it could be very problematic for my game if I dont fix that.
Here is the code with which I am experimenting:
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
public class Resizer {
int width = 500;
int height = 500;
JFrame frame;
JLabel screen;
BufferedImage image;
ImageIcon icon;
public static void main(String[] args) {
Resizer r = new Resizer();
r.runCode();
}
private void runCode() {
createFrame();
javax.swing.Timer t = new javax.swing.Timer(1000/60, new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
checkResize();
drawSomething();
}
});
t.start();
}
private void createFrame() {
frame = new JFrame("Resize Experiment");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
screen = new JLabel();
screen.setSize(width, height);
image = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
icon = new ImageIcon(image);
screen.setIcon(icon);
frame.add(screen);
frame.pack();
frame.setVisible(true);
}
private void checkResize() {
if (frame.getWidth() != width || frame.getHeight() != height) {
screen.setSize(frame.getWidth(), frame.getHeight());
image = new BufferedImage(frame.getWidth(), frame.getHeight(), BufferedImage.TYPE_INT_ARGB);
frame.pack();
width = frame.getWidth();
height = frame.getHeight();
}
}
private void drawSomething() {
Graphics2D pen = image.createGraphics();
pen.setColor(Color.BLACK);
pen.fillRect(0, 0, width, height);
pen.setColor(Color.RED);
pen.drawLine(width, height/2, width-10, height/2);
addImage();
}
private void addImage() {
icon = new ImageIcon(image);
screen.setIcon(icon);
}
}
I noticed it because of the following statement:
pen.drawLine(width, height/2, width-10, height/2);
It should draw a line from the right side of the JFrame to a place 10 pixel further to the left. In reality, I can't see any line at all. It appears once I raise the distance value.
My question is: Why does this happen, and how can I fix this?
I noticed that every JFrame I create doesnt show a few pixels - ~10px at the right side
That is because you are attempting to make your BufferedImage the size of the frame.
The problem is the frame contains "borders". Your image can only be painted inside the borders.
You should NOT be attempting to make the BufferedImage the size of the frame.
As suggested above the custom painting should be done in the paintComponent() method of a JPanel. Then you add the panel to the frame. Inside the paintComponent() method you can use the getWidth() and getHeight() methods of the panel to make sure you paint on the complete area.
I really like how with Graphics2D things aren't stuffed in one method but can be split up
The custom painting done in the paintComponent() method is done with a Graphics2D object, so you can do anything you want. All Swing components are painted in the paintComponent() method.
I have three files, here is the main one, titled Display.java:
import java.awt.*;
import javax.swing.*;
public class Display{
static JFrame main = new JFrame("hello");
static Container c = main.getContentPane();
static StartScreen start = new StartScreen();
static screenTracker track = new screenTracker();
public static void main(String[] args) {
main.setSize(new Dimension(1920,1080));
main.setVisible(true);
if(track.screen==1) {
main.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
c.add(start, BorderLayout.CENTER);
}
}
}
My second file is titled: StartScreen.java. It contains my paint function:
import java.applet.Applet;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
public class StartScreen extends Applet{
private static final long serialVersionUID = 1L;
int x = 0;
static Container c = Display.c;
static Color gray = new Color(128,128,128);
public void paint(Graphics g) {
Thread t = new Thread() {
#Override
public void run() {
while(true) {
c.setBackground(gray);
g.clearRect( 0 , 0 , getWidth() , getHeight() );
BufferedImage img1 = null;
BufferedImage img2 = null;
BufferedImage img3 = null;
try {
img1 = ImageIO.read(new File("images/img1.png"));
img2 = ImageIO.read(new File("images/img2.png"));
img3 = ImageIO.read(new File("images/img3.png"));
}
catch(IOException e) {
g.drawString("bad", 200, 200);
}
String title1 = "hello: ";
String title2 = "Gamee ";
String title3 = "people";
Color pink = new Color(244,66,182);
Color black = new Color(0,0,0);
g.setColor(black);
g.setFont(new Font("TimesRoman", Font.PLAIN, 50));
g.drawString(title1, x+600, 200);
g.setColor(pink);
g.setFont(new Font("TimesRoman", Font.ITALIC, 50));
g.drawString(title2, 860, 200);
g.setFont(new Font("TimesRoman", Font.PLAIN, 50));
g.setColor(black);
g.drawString(title3, 960, 200);
g.drawImage(img1, 200, 250, null);
g.drawImage(img2, 700, 150, 1000, 750, null);
g.drawImage(img3, 500, 250, null);
x++;
try {
sleep(10); // milliseconds
} catch (InterruptedException ex) {}
}
}
};
t.start();
}
}
My third file is short:
public class screenTracker {
int screen = 1;
}
Right now I just want the paint function in StartScreen.java to display on my JFrame. I want hello to move across the screen. I made the thread t so the screen can close. If I get rid of the thread t, or create it in Display.java (inside the if statement, around where I set the default close operation and add the startscreen to the container c) the program draws what I want, but the Jframe won't close. I have looked in a lot of other websites, and questions, but I haven't been able to figure this out. I am new to multithreading and graphics in java,
Many problems:
Don't extend Applet. Applets are dead. For custom painting you would simply extend JPanel and add the panel to the frame.
You would override paintComponent() in the JPanel, not paint().
A painting method is for painting only you should NOT:
read the image in the method. The painting method gets called many times. You want painting to be fast and should not be doing I/O. Read the images in the constructor of your class
be creating Threads. Again since the painting method is called multiple times that you can't control you don't want to keep creating Threads. If you want animation of some kind then you should be using a Swing Timer.
I suggest you read the section from the Swing tutorial on Custom Painting. It contains working examples that will show you how to better structure your code.
There is also a section on How to Use Swing Timers.
If we speak about graphics in java we have only one thread responsible for It the EDT ([1][Event Dispatch Thread]). In other words whatever you want to do with the view will be handled by and has to be handled by EDT, yes your view also with all setbackroungs, frames...
But be aware, it is only one thread, when this tread is busy doing some calculation cannot react to the user events, so your view will freezee. What you can do in another thread is to prepare the data (in your case read the file images)
To work in the EDT you use SwingInvoker.invokelater() or check if you are already in EDT by using swingutilities.isEventDispatchThread()
[1] https://docs.oracle.com/javase/tutorial/uiswing/concurrency/dispatch.html
I'm working on a login screen for my game. I have a total of two images on it. One is a splash screenshot and the other is the background image. I'm using BufferedImages to render the images to the screen.
The problem I get is that when I add a standard button to the Canvas, the button takes up the whole window, and evidently, I don't want that.
I would post a picture, but alas, I do not have "enough reputation" to do that. Here's a look at my code though:
import java.awt.Button;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.TextField;
import java.awt.image.BufferStrategy;
import java.awt.image.BufferedImage;
import java.awt.image.DataBufferInt;
import javax.swing.JFrame;
import javax.swing.UIManager;
public class Login extends Canvas implements Runnable {
private static final long serialVersionUID = 1L;
private static final int WIDTH = 495;
private static final int HEIGHT = 307;
private static final int SCALE = 2;
private final Dimension size = new Dimension(WIDTH * SCALE, HEIGHT * SCALE);
private BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
public int[] pixels = ((DataBufferInt) image.getRaster().getDataBuffer()).getData();
private BufferedImage splash = new BufferedImage(315, 177, BufferedImage.TYPE_INT_RGB);
public int[] splashPixels = ((DataBufferInt) splash.getRaster().getDataBuffer()).getData();
private Thread thread;
public static boolean isRunning = false;
JFrame frame;
MainMenu menu;
Splash splashscreen;
Button login;
Button register;
TextField username;
private Login() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (Exception exc) {
exc.printStackTrace();
}
frame = new JFrame("Game Login");
menu = new MainMenu(WIDTH, HEIGHT, "/login/login_screen.png");
splashscreen = new Splash(315, 177, "/login/splash.png");
frame.setSize(size);
frame.setVisible(true);
frame.setResizable(false);
frame.setLocationRelativeTo(null);
setPreferredSize(size);
frame.add(this);
login = new Button("Login");
login.setBounds(0, 0, getWidth(), getHeight());
frame.add(login);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
private void begin() {
createBufferStrategy(2);
thread = new Thread(this);
thread.start();
isRunning = true;
}
private void finish() throws InterruptedException {
isRunning = false;
thread.join();
}
private void updateLogin() {
for (int a = 0; a < pixels.length; a++) {
pixels[a] = menu.pixels[a];
}
}
private void renderLogin() {
BufferStrategy buffer = getBufferStrategy();
Graphics gfx = buffer.getDrawGraphics();
for (int a = 0; a < splashPixels.length; a++) {
splashPixels[a] = splashscreen.splashPixels[a];
}
gfx.drawImage(image, 0, 0, getWidth(), getHeight(), null);
gfx.drawImage(splash, 320, 37, 625, 340, null);
gfx.setColor(Color.WHITE);
gfx.drawString("Game Co © 2013", 3, (getHeight() - 4));
gfx.drawString("\"Game\" is a trademark of Blah-Blah-Blah.", (getWidth() - 268), (getHeight() - 3));
gfx.dispose();
buffer.show();
}
public void run() {
while (isRunning == true) {
updateLogin();
renderLogin();
}
try {
finish();
} catch (InterruptedException exc) {
exc.printStackTrace();
}
}
public static void main(String[] args) {
Login login = new Login();
login.begin();
}
}
Once again, my only problem is that I keep getting a enlarged button.
Thanks in advance, I know you guys are busy and whatnot and I appreciate taking the time to look over and help answer my questions.
P.S. Does anyone know how to make a password field with AWT? I'll also need that too. ;)
Solution: add your JButton (again use Swing components) First to a JPanel (which uses FlowLayout by default), and then add that to the top level window.
You could just change the layout manager for your frame to a FlowLayout so it will behave like a JPanel.
frame.setLayout(new FlowLayout());
You state:
The problem I get is that when I add a standard button to the Canvas, the button takes up the whole window, and evidently, I don't want that.
You're trying to add a component directly to a container that is using BorderLayout, likely the contentPane of a top-level window, and so by default it is added BorderLayout.CENTER and fills the container.
Solution: add your JButton (again use Swing components) First to a JPanel (which uses FlowLayout by default), and then add that to the top level window.
Again, there's no need to mix AWT and Swing components and there are in fact strong arguments not to do so. I suggest that you stick with all Swing components for your GUI.
Does anyone know how to make a password field with AWT? I'll also need that too. ;)
Again, don't use AWT but instead use a Swing JPasswordField.
So I am creating a basic application that I want to have a JLabel at the bottom of the screen that starts at the left bottom corner and moves, animation style, to the right bottom corner in a set time, and a static image in the center. To do this, I created a JFrame with a JPanel using BorderLayout. There is a JLabel with an ImageIcon added to BorderLayout.CENTER and a JPanel at BorderLayout.SOUTH. My code, while hastily written and far from pretty, is:
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.Timer;
import javax.swing.BorderFactory;
public class GameWindow extends JPanel{
private static JLabel mainWindow, arrowLabel, arrowBox;
protected static JFrame frame;
protected static JPanel arrows;
public static int x = 600;
public GameWindow(){
mainWindow = new JLabel("Center");
arrowLabel = new JLabel("Moving");
arrows = new JPanel();
arrows.setSize(600, 100);
arrows.setLayout(null);
arrowBox = new JLabel("");
arrowBox.setBounds(0, 0, 150, 100);
arrowBox.setPreferredSize(new Dimension(150, 100));
arrowBox.setBorder(BorderFactory.createLineBorder(Color.black));
arrows.add(arrowBox);
this.setSize(600,600);
this.setLayout(new BorderLayout());
this.add(mainWindow, BorderLayout.CENTER);
this.add(arrows, BorderLayout.SOUTH);
}
public static void main(String[] args)
{
GameWindow g = new GameWindow();
frame = new JFrame("Sword Sword Revolution");
frame.add(g);
frame.setSize(600,600);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
Timer t = new Timer(1000, new ActionListener(){
#Override
public void actionPerformed(ActionEvent e) {
arrows.add(arrowLabel);
arrowLabel.setBounds(x, 100, 100, 100);
x-=50;
arrows.repaint();
frame.repaint();
}
});
t.start();
}
}
The ImageIcon in the center JLabel appears fine, and the empty JLabel with a border appears at the bottom, but I cannot get the second JLabel with the arrow image to show up on screen. Eventually I will change to scheduleAtFixedRate to continuously move the JLabel, but right now I can't even get the image to appear on screen.
I also understand that I will most likely not be able to use FlowLayout for this, as I understand it does not allow you to set the location of your components. I tried using null layout, but with null layout the empty JLabel with a border does not appear. I can barely make out the top of the border at the bottom edge of the frame, but even with setLocation I cannot get it to appear where I want it to.
Obviously, my thought process is flawed, so any help would be appreciated.
Your use of threading is all wrong for Swing applications. You should not be trying to add or remove components in a background thread but instead should use a Swing Timer to do this on the Swing event thread.
Also, what do you mean by:
I want to have a scrolling JLabel at the bottom of the screen
Please clarify the effect you're trying to achieve.
Also regarding,
I also understand that I will most likely not be able to use FlowLayout for this, as I understand it does not allow you to set the location of your components. I tried using null layout, but with null layout the empty JLabel with a border does not appear. I can barely make out the top of the border at the bottom edge of the frame, but even with setLocation I cannot get it to appear where I want it to.
No, don't use null layout for this situation. There are much better layout managers that can help you build your application in a cleaner more platform-independent manner.
Edit 3
Regarding:
To clarify, at the bottom of the screen I want a JLabel at the far right corner, then in the swing timer, the JLabel will gradually move to the left until it leaves the screen. If I could get setLocation to work, the basic premise would be to have a variable x set to 600, and then every second decrement x by say 50 and then redraw the JLabel at the new location on the screen. Basic animation.
I would create a JPanel for the bottom of the screen for the purposes of either holding your JLabel or displaying the image without a JLabel by overriding its paintComponent(...) method. If you use it as a container, then yes, its layout should be null, but the rest of the GUI should not be using null layout. The Swing Timer would simply change the JLabel's location and then call repaint() on its JPanel/container. If you go the latter route, you would draw the image in the JPanel's paintComponent(...) method using g.drawImage(myImage, x, y), and your timer would change x and/or y and call repaint() on the drawing JPanel.
Also, you likely do not want to keep adding a JLabel in your timer but rather simply moving the JLabel that's already displayed in the GUI.
Also, to avoid focus issues, don't use a KeyListener to capture keystroke input but rather use Key Bindings. Google will direct you to a great tutorial on this construct.
Edit 4
For example:
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.EnumMap;
import javax.imageio.ImageIO;
import javax.swing.*;
#SuppressWarnings("serial")
public class AnimateExample extends JPanel {
public static final String DUKE_IMG_PATH =
"https://duke.kenai.com/iconSized/duke.gif";
private static final int PREF_W = 800;
private static final int PREF_H = 800;
private static final int TIMER_DELAY = 20;
private static final String KEY_DOWN = "key down";
private static final String KEY_RELEASE = "key release";
public static final int TRANSLATE_SCALE = 3;
private static final String BACKGROUND_STRING = "Use Arrow Keys to Move Image";
private static final Font BG_STRING_FONT = new Font(Font.SANS_SERIF,
Font.BOLD, 32);
private EnumMap<Direction, Boolean> dirMap =
new EnumMap<AnimateExample.Direction, Boolean>(Direction.class);
private BufferedImage image = null;
private int imgX = 0;
private int imgY = 0;
private int bgStringX;
private int bgStringY;
public AnimateExample() {
for (Direction dir : Direction.values()) {
dirMap.put(dir, Boolean.FALSE);
}
try {
URL imgUrl = new URL(DUKE_IMG_PATH);
image = ImageIO.read(imgUrl);
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
new Timer(TIMER_DELAY, new TimerListener()).start();
// here we set up our key bindings
int condition = JComponent.WHEN_IN_FOCUSED_WINDOW;
InputMap inputMap = getInputMap(condition);
ActionMap actionMap = getActionMap();
for (final Direction dir : Direction.values()) {
// for the key down key stroke
KeyStroke keyStroke = KeyStroke.getKeyStroke(dir.getKeyCode(), 0,
false);
inputMap.put(keyStroke, dir.name() + KEY_DOWN);
actionMap.put(dir.name() + KEY_DOWN, new AbstractAction() {
#Override
public void actionPerformed(ActionEvent arg0) {
dirMap.put(dir, true);
}
});
// for the key release key stroke
keyStroke = KeyStroke.getKeyStroke(dir.getKeyCode(), 0, true);
inputMap.put(keyStroke, dir.name() + KEY_RELEASE);
actionMap.put(dir.name() + KEY_RELEASE, new AbstractAction() {
#Override
public void actionPerformed(ActionEvent arg0) {
dirMap.put(dir, false);
}
});
}
FontMetrics fontMetrics = getFontMetrics(BG_STRING_FONT);
int w = fontMetrics.stringWidth(BACKGROUND_STRING);
int h = fontMetrics.getHeight();
bgStringX = (PREF_W - w) / 2;
bgStringY = (PREF_H - h) / 2;
}
#Override
public Dimension getPreferredSize() {
return new Dimension(PREF_W, PREF_H);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
g.setFont(BG_STRING_FONT);
g.setColor(Color.LIGHT_GRAY);
g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
g.drawString(BACKGROUND_STRING, bgStringX, bgStringY);
if (image != null) {
g.drawImage(image, imgX, imgY, this);
}
}
private class TimerListener implements ActionListener {
public void actionPerformed(java.awt.event.ActionEvent e) {
for (Direction dir : Direction.values()) {
if (dirMap.get(dir)) {
imgX += dir.getX() * TRANSLATE_SCALE;
imgY += dir.getY() * TRANSLATE_SCALE;
}
}
repaint();
};
}
enum Direction {
Up(KeyEvent.VK_UP, 0, -1), Down(KeyEvent.VK_DOWN, 0, 1), Left(
KeyEvent.VK_LEFT, -1, 0), Right(KeyEvent.VK_RIGHT, 1, 0);
private int keyCode;
private int x;
private int y;
private Direction(int keyCode, int x, int y) {
this.keyCode = keyCode;
this.x = x;
this.y = y;
}
public int getKeyCode() {
return keyCode;
}
public int getX() {
return x;
}
public int getY() {
return y;
}
}
private static void createAndShowGui() {
AnimateExample mainPanel = new AnimateExample();
JFrame frame = new JFrame("Animate Example");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(mainPanel);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
createAndShowGui();
}
});
}
}
Which will create this GUI:
Three possibilities:
You can either use a library like SlidingLayout to create such transition with very few lines of code. You won't be able to tweak the animation but your life will be easier.
You can use an animation engine like the Universal Tween Engine to configure everything by hand and tweak the animation as much as you want (the first lib uses this one under the hood). Using such engine, you can animate what you want: positions, colors, font size, ...
You can code everything by hand and embrace the hell that is the animation world :)
In the end, you'll be able to quickly create animations like these (it's a tool I'm currently working on, used to configure eclipse projects for android dev using the LibGDX game framework):
I made these libraries to ease the pain that is UI animation (I love UI design :p). I released them open-source (free to use, license apache-2), hoping they may help some people too.
If you need help, there is a dedicated help forum for each library.
Very simple, look at this:
javax.swing.JLabel lb = new javax.swing.JLabel();
Image image = Toolkit.getDefaultToolkit().createImage("Your animated GIF");
ImageIcon xIcon = new ImageIcon(image);
xIcon.setImageObserver(this);
lb.setIcon(xIcon);
I have problem with displaying the image on JPanel when I rescaled the image according to the size of the JPanel. The image did not appear.
public class createGUII extends JFrame{
String [] background = {"c1.jpg","c2.jpg","c3.jpg","c4.jpg"};
ArrayList<String> bgPicturesFiles = new ArrayList<String>(Arrays.asList(background));
JPanel panel;
ImagePanel imgBg;
public createGUII(){
GridBagLayout m = new GridBagLayout();
Container c = getContentPane();
c.setLayout (m);
GridBagConstraints con = new GridBagConstraints();
//Panel for background
panel = new JPanel();
panel.setSize(600, 600);
con = new GridBagConstraints();
con.anchor=GridBagConstraints.CENTER;
con.gridy = 1; con.gridx = 0;
con.gridwidth = 1; con.gridheight = 1;
m.setConstraints(panel, con);
c.add(panel);
//randomized the image files
Random r = new Random();
int random = r.nextInt(bgPicturesFiles.size());
//rescale the image according to the size of the JPanel
imgBg = new ImagePanel(new ImageIcon(bgPicturesFiles.get(random)).getImage().getScaledInstance(panel.getHeight(), panel.getWidth(),Image.SCALE_SMOOTH));
panel.add(imgBg);
setResizable(false);
setVisible(true);
setExtendedState(getExtendedState()|JFrame.MAXIMIZED_BOTH);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
new createGUII();
}
});
}
}
class ImagePanel extends JPanel {
private Image img;
public ImagePanel(String img) {
this(new ImageIcon(img).getImage());
}
public ImagePanel(Image img) {
this.img = img;
Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));
setPreferredSize(size);
setMinimumSize(size);
setMaximumSize(size);
setSize(size);
setLayout(null);
}
public void paintComponent(Graphics g) {
g.drawImage(img, 0, 0, null);
}
}
Have a look at this: JPanel background image, JPanel with background image, with other panels overlayed
The second link mentions that you have to do some custom painting for scaling. This is a problem. I wouldn't scale the image every single time in the paintComponent method, but do it once if the width and height have been changed since the last call, and in that case, recreate a BufferedImage containing the image which you blit every single time before calling the superclass paintComponent, scaled up to the right size (use something like Image scaling does not work when original image height & width is smaller the scaling height & width). I can see an issue where it might try to fill the panel with a colour when you call the superclass paintComponent method, but you'll have to experiment.
The problem is that in Java images get loaded asynchronously. There are several issues with the above code because of that:
The image doesn't get loaded, so it's dimensions are (-1, -1). Thus, ImagePanel's size is invalid
Even if the dimensions get set manually (i.e. changing it to new Dimension(600, 600)), the image itself may not be loaded.
JFrame resizing is disabled. If you allow it, you would be able to get the image drawn with the above code by artificially making Swing load the image when the JFrame is resized
To ensure loading, add the following:
new ImageIcon(img).getImage();
after this.img = img; in ImagePanel's constructor.
Note that this is partially a hack - I'm not a GUI expert, but I get the idea the above could be written much better. Maybe somebody else might be able to shed more light.
Here are some links that might be helpful:
http://www.exampledepot.com/egs/java.awt.image/Image2Buf.html
http://webcache.googleusercontent.com/search?q=cache:Ho0L4KoL44AJ:java.net/pub/a/today/2007/04/03/perils-of-image-getscaledinstance.html+java+getscaledinstance&cd=1&hl=en&ct=clnk&gl=us&client=ubuntu (yes, it's from Google cache, the original link doesn't work...)
Hope this helps.
I don't see where you're actually reading the image, as suggested in this example.
Addendum: I've added an example of scaling. See also Don't Use getScaledInstance() and The Perils of Image.getScaledInstance().
import java.awt.EventQueue;
import java.awt.GridLayout;
import java.awt.Image;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
/** #see http://stackoverflow.com/questions/4170463 */
public class LoadImage extends JPanel {
private Image image;
public LoadImage() {
super(new GridLayout());
try {
image = ImageIO.read(new File("image.jpg"));
} catch (IOException ex) {
ex.printStackTrace(System.err);
}
int w = image.getWidth(null) / 2;
int h = image.getHeight(null) / 2;
this.add(new JLabel(new ImageIcon(
image.getScaledInstance(w, h, Image.SCALE_SMOOTH))));
}
private void display() {
JFrame f = new JFrame("LoadImage");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.add(this);
f.pack();
f.setLocationRelativeTo(null);
f.setVisible(true);
}
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
new LoadImage().display();
}
});
}
}
Here is a link that should help. However I found a way that better suited the problem I had this was what I found, and the following is what I took from that.
I hope this helps.
Container con = getContentPane();
final String backgroundPath = "C:\\background.jpg";
ImageIcon imh = new ImageIcon(backgroundPath);
setSize(imh.getIconWidth(), imh.getIconHeight());
JPanel pnlBackground = new JPanel()
{
public void paintComponent(Graphics g)
{
Image img = new ImageIcon(backgroundPath).getImage();
g.drawImage(img, 0, 0, null);
}
};
con.add(pnlBackground);
pnlBackground.setBounds(0, 0, imh.getIconWidth(), imh.getIconHeight());