Displaying an image over another - java

Currently I am having an issue whereby the Robot.png is replacing the image of my gameboard.png . I want to make it so that the robot .png is ontop of the board and be able to move the robot around the board.
Board.Java
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;
import javax.swing.ImageIcon;
import javax.swing.JPanel;
public class Board extends JPanel {
private Image gameboard;
public Board(){
initBoard();
}
private void initBoard(){
loadImage();
int w = gameboard.getWidth(this);
int h = gameboard.getHeight(this);
setPreferredSize(new Dimension(w,h));
}
private void loadImage(){
ImageIcon i = new ImageIcon("res/gameboard.png");
gameboard = i.getImage();
}
#Override
public void paintComponent(Graphics g){
g.drawImage(gameboard,0,0,null);
}
}
Player.Java
import javax.swing.*;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import javax.swing.ImageIcon;
public class Player extends JPanel {
public void paint(Graphics g){
Graphics2D g2d = (Graphics2D)g;
ImageIcon ic = new ImageIcon("res/Robot.png");
Image image1 = ic.getImage();
g2d.drawImage(image1, 100, 100, null);
}
}
GameGUI.Java
import javax.swing.JFrame;
public class GameGui extends JFrame {
public GameGui(){
initGui();
}
public void initGui(){
add(new Board());
add(new Player());
setTitle("11+ Game");
pack();
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
setSize(1240,620);
}
}

You don't need to reload the robot image every time. You should use ImageIO to load it, and save it in a member variable.
Otherwise, the way to not have the image overwrite the whole background image is to use height and width parameters with your drawImage call
public void paint(Graphics g){
Graphics2D g2d = (Graphics2D)g;
ImageIcon ic = new ImageIcon("res/Robot.png");
Image image1 = ic.getImage();
int width = ..., height = ...;
g2d.drawImage(image1, 100, 100, width, height, null);
}

Related

JButton image rendering badly

I'm making a application with Swing, and I want to add to the main panel a button with a cross icon on it. But when I draw an image on it, the image is rendering weirdly.
I've already tried several things like resizing the image outside the application, and the cross is made with IllustratorCC so I don't think it's the quality of the source image that's the issue.
import javax.imageio.*;
import javax.swing.*;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
public class ImageRenderingBadly extends JPanel
{
BufferedImage cross;
public ImageRenderingBadly()
{
try {
URL url = new URL("https://i.imgur.com/cWGntek.png");
cross = ImageIO.read(url);
} catch (IOException e) {
e.printStackTrace();
}
}
#Override
public void paintComponent(Graphics g)
{
g.drawImage(cross,0,0,null);
}
public static void main(String[] args)
{
JFrame frame = new JFrame();
frame.setSize(new Dimension(200,200));
frame.setBackground(new Color(0));
ImageRenderingBadly panel = new ImageRenderingBadly();
frame.setContentPane(panel);
frame.setVisible(true);
}
}
Source:
Rendering badly:
FOUND THE SOLUTION
Use antialiasing in paintComponent :(https://docs.oracle.com/javase/tutorial/2d/advanced/quality.html)
#Override
public void paintComponent(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
RenderingHints rh = new RenderingHints(
RenderingHints.KEY_RENDERING,
RenderingHints.VALUE_RENDER_QUALITY);
g2.setRenderingHints(rh);
g2.drawImage(cross,0,0,null);
}
It works for me:
Note that I have used the image to create two images and Icons, one for the button, and one for the depressed state, to indicate that it has been pressed.
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
public class XButtonTest {
private static final String X_IMG_PATH = "https://i.imgur.com/cWGntek.png";
public static void main(String[] args) {
try {
URL xImgUrl = new URL(X_IMG_PATH);
BufferedImage xImage = ImageIO.read(xImgUrl);
int w = xImage.getWidth();
int h = xImage.getHeight();
BufferedImage pressedImg = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2 = pressedImg.createGraphics();
g2.setColor(Color.LIGHT_GRAY);
g2.fillRect(0, 0, w, h);
g2.drawImage(xImage, 0, 0, null);
g2.dispose();
Icon icon = new ImageIcon(xImage);
Icon pressedIcon = new ImageIcon(pressedImg);
JButton button = new JButton(icon);
button.setPressedIcon(pressedIcon);
button.setBorderPainted(false);
button.setFocusPainted(false);
button.setContentAreaFilled(false);
JPanel panel = new JPanel();
panel.add(button);
JOptionPane.showMessageDialog(null, panel, "Test", JOptionPane.PLAIN_MESSAGE);
} catch (IOException e) {
e.printStackTrace();
}
}
}
I figured out that the "drawImage" render badly image and that' the problem I think :
public class Panel extends JPanel
{
BufferedImage image;
public Panel() {
super();
try {
image = ImageIO.read(new File("images/BMW-TA.jpg"));
} catch (IOException e) {
e.printStackTrace();
}
}
#Override
public void paintComponent(Graphics g)
{
super.paintComponent(g);
g.drawImage(image, 0, 0, null);
}
}
Source : https://i.imgur.com/ebr17CV.jpg
Rendering : https://i.imgur.com/Z01I7mn.png
FOUND THE SOLUTION
Use antialiasing in paintComponent :
#Override
public void paintComponent(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
RenderingHints rh = new RenderingHints(
RenderingHints.KEY_RENDERING,
RenderingHints.VALUE_RENDER_QUALITY);
g2.setRenderingHints(rh);
g2.drawImage(cross,0,0,null);
}

Java 8/Eclipse Image not visible

I am trying to get an Image for a little animation but the Panel stays white.
The image is in the same folder than the class.
public class JBallonPanel extends JPanel implements Runnable{
private Image img;
private int x, y;
JBallonPanel(){
setBackground(Color.white);
img=Toolkit.getDefaultToolkit().createImage(".//Ball.jpg");
x=this.getWidth()/2;
y=this.getHeight()/2;
}
public void paintComponent(Graphics g){
g.drawImage(img, x, y,
img.getWidth(this), img.getWidth(this), this);
}
Take a look below, I just did some adjustments, but your code is working.
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.WindowConstants;
//public class JBallonPanel extends JPanel implements Runnable {
//You can remove implements Runnable
public class JBallonPanel extends JPanel {
private Image img;
private int x, y;
JBallonPanel(){
setBackground(Color.white);
// your path should have \\ for example C:\\Ball.jpg or C:\\myImageFolder\\Ball.jpg
// but in your case, it works too.
img=Toolkit.getDefaultToolkit().createImage("C:\\Ball.jpg");
x=this.getWidth()/2;
y=this.getHeight()/2;
}
public void paintComponent(Graphics g){
g.drawImage(img, x, y, img.getWidth(this), img.getWidth(this), this);
}
//And run like this
public static void main(String[] args) {
JFrame frame = new JFrame();
frame.getContentPane().add(new JBallonPanel());
frame.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
frame.pack();
frame.setSize(800, 800);
frame.setVisible(true);
}
}

How to delete shapes drawn on an Image

I am developing a small Paint tool. And I am able to load and draw Lines or Circles and other shapes on an image. Also I have an eraser tool to erase the shapes that I have drawn.
This is code for that:
g.setColor(getColor().WHITE);
g.fillRect(getXAxis() - getThickness(), getYAxis() - getThickness(), getThickness() * 2, getThickness() * 2);
My problem is that, If I have loaded an image and drawn some shapes on it. Then when I tried to erase the shapes, the image is also gets replaced with white color.
Is there any way to set the image as the background while using fillRect() to erase the shape, so that my image will be untouched.
Here is the example. To test it you need to replace my image with your background image.
import java.awt.AlphaComposite;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.File;
import javax.imageio.ImageIO;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.WindowConstants;
/**
* <code>PaintTryout</code>.
*
* #author smedvynskyy
*/
public class PaintPanel extends JPanel {
private Image backgroundImage;
private BufferedImage paintImage;
public PaintPanel() {
try {
// replace this image with your image
backgroundImage = ImageIO.read(new File("E:\\icons\\blackboard.png"));
paintImage = new BufferedImage(backgroundImage.getWidth(this),
backgroundImage.getHeight(this), BufferedImage.TYPE_INT_ARGB);
} catch (final Exception e) {
e.printStackTrace();
}
}
public void fillRect() {
final Graphics g = paintImage.createGraphics();
g.setColor(Color.RED);
g.fillRect(0, 0, 50, 50);
g.dispose();
repaint();
}
public void clearRect() {
final Graphics2D g = paintImage.createGraphics();
g.setColor(new Color(0, 0, 0, 0));
g.setComposite(AlphaComposite.Clear); // overpaint
g.fillRect(0, 0, 50, 50);
g.dispose();
repaint();
}
/**
* {#inheritDoc}
*/
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawImage(backgroundImage, 0, 0, this);
g.drawImage(paintImage, 0, 0, this);
}
/**
* {#inheritDoc}
*/
#Override
public Dimension getPreferredSize() {
return new Dimension(backgroundImage.getWidth(this),
backgroundImage.getHeight(this));
}
public static void main(String[] args) {
final JFrame frm = new JFrame("Tesp paint");
final PaintPanel p = new PaintPanel();
frm.add(p);
final JPanel buttons = new JPanel();
final JButton fill = new JButton("Fill Rect");
fill.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
p.fillRect();
}
});
final JButton clear = new JButton("Clear Rect");
clear.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
p.clearRect();
}
});
buttons.add(fill);
buttons.add(clear);
frm.add(buttons, BorderLayout.SOUTH);
frm.pack();
frm.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frm.setLocationRelativeTo(null);
frm.setVisible(true);
}
}
The easy way to do this is to draw the lines in XOR mode. Then, to erase them, you just draw them again.

Java is drawing 2 boxes

So I am making a little game to learn some graphical java and I am having trouble with a button. It is drawing 2, one is the correct size and in the correct location and then there is a very small button centered at the top of the application. THere should only be the one button at (0,0,200,50). I do not know what is wrong but here is the code for the button, if you need something more then this let me know!
ImageIcon test = new ImageIcon("nhButton.png");
JButton jb = new JButton(test);
jb.setBounds(0, 0, 200, 50);
jb.setVisible(true);
add(jb);
EDIT1: the 2 classes where error will be: board.java:
import javax.swing.JPanel;
import javax.swing.JButton;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;
public class Board extends JPanel {
public Board() {
}
#Override
public void paintComponent(Graphics g) {
ImageIcon test = new ImageIcon("nhButton.png");
JButton jb = new JButton(test);
jb.setBounds(0, 0, 200, 50);
jb.setVisible(true);
add(jb);
}
private void drawRectangle(Graphics g, int x, int y, int width, int height) {
Graphics2D g2d = (Graphics2D) g;
g2d.drawRect(x, y, width, height);
}
}
and the main:
import java.awt.EventQueue;
import java.awt.GraphicsEnvironment;
import java.awt.Toolkit;
import javax.swing.JFrame;
public class main extends JFrame {
public main() {
initUI();
}
private void initUI() {
add(new Board());
setSize(800, 600);
setTitle("Application");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
}
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
main ex = new main();
ex.setVisible(true);
}
});
}
}
If you try to resize window, you will see that buttons are spawning.
This happens because of your paintComponent method, which is called every painting iteration.
You should move button addition, for example, to constructor which is called once:
public Board() {
ImageIcon test = new ImageIcon("nhButton.png");
JButton jb = new JButton(test);
jb.setBounds(0, 0, 200, 50);
jb.setVisible(true);
add(jb);
}

Only 1 Corner is Rounded when I call fillRoundRect()

When run this code:
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import javax.swing.JButton;
import javax.swing.JLabel;
public class CustomButton extends JButton {
int width = 100;
int height = 50;
int radius = 10;
JLabel lab;
#Override
protected void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2.setColor(Color.ORANGE);
g2.fillRoundRect(0, 0, width, height, radius, radius);
g2.dispose();
super.paintComponent(g2);
super.paintComponent(g);
}
}
And my other class:
package custom.frame;
import java.awt.FlowLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class CustomFrame {
public static void main(String[] args) {
JFrame f = new JFrame();
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setLayout(new FlowLayout());
f.setSize(500,500);
f.setLocationRelativeTo(null);
JPanel pane = new JPanel();
pane.setBounds(0,0,500,500);
CustomButton btn = new CustomButton();
pane.add(btn);
f.add(btn);
f.setVisible(true);
}
}
I get a get a regular rectangle with only 1 rounded side. Please see the image below.
Is this the expected function?
If not, how can I fix this.
Edit
I can get 2 rounded corners if I do this:
g2.fillRoundRect(0, 0, 50, 50, 7, 7);
The only thing I can really think of is that the window containing the rectangle is too small and is cutting off the other three corners, but that seems pretty unlikely.

Categories