Mouse coordinates relative to ImageIcon within a JScrollPane - java

I am building a desktop application in Java. I want to get the mouse coordinates of a mouse click relative to an image which is within a JSrollPane. The JScrollPane, screenScroll, is contained in a JPanel with a BorderLayout.
final JLabel screenLabel = new JLabel(new ImageIcon(image));
JScrollPane screenScroll = new JScrollPane(screenLabel);
screenScroll.getViewport().setBackground(Color.white);
screenLabel.addMouseListener(new MouseAdapter() {
#Override //I override only one method for presentation
public void mousePressed(MouseEvent e) {
System.out.println("Y'all clicked at: "+e.getX() + ", " + e.getY()+" in the image.");
}
});
So here's the problem: the JPanel is larger than the image and the JScrollPane is taking up 100% of the JPanel (which looks nice, I'm happy about that) but the mousePressed event is giving me the coordinates relative to the JScrollPane/JPanel, not the image so the x coordinate is offset (even though the mouseListener was add to the JLabel containing the ImageIcon).
Hope I explained that clearly. How can I modify above code to get coordinates relative to image?

Basically, it would be very hard to achieve this using a JLabel as the actual position of the image is determined by the JLabel's look and feel delegate. While you could create your own delegate, you would end up needing to create one for each supported platform and...I'm too lazy...
Instead, you could create a custom component and render the image the way you want. You would then be in a position to better ascertain the location of the image and convert the mouse point values you require, for example...
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class Main {
public static void main(String[] args) {
new Main();
}
public Main() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
}
BufferedImage img = ImageIO.read(new File("C:\\hold\\thumbnails\\MT015.jpg"));
final ImagePanel imgPane = new ImagePanel(img);
JScrollPane scrollPane = new JScrollPane(imgPane);
final JLabel report = new JLabel("...");
imgPane.addMouseListener(new MouseAdapter() {
#Override
public void mouseClicked(MouseEvent e) {
Point panelPoint = e.getPoint();
Point imgContext = imgPane.toImageContext(panelPoint);
report.setText("You clicked at " + panelPoint + " which is relative to the image " + imgContext);
}
});
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(scrollPane);
frame.add(report, BorderLayout.SOUTH);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
} catch (IOException ex) {
Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
}
}
});
}
public class ImagePanel extends JPanel {
private BufferedImage img;
public ImagePanel(BufferedImage img) {
this.img = img;
}
#Override
public Dimension getPreferredSize() {
return img == null ? super.getPreferredSize() : new Dimension(img.getWidth(), img.getHeight());
}
protected Point getImageLocation() {
Point p = null;
if (img != null) {
int x = (getWidth() - img.getWidth()) / 2;
int y = (getHeight() - img.getHeight()) / 2;
p = new Point(x, y);
}
return p;
}
public Point toImageContext(Point p) {
Point imgLocation = getImageLocation();
Point relative = new Point(p);
relative.x -= imgLocation.x;
relative.y -= imgLocation.y;
return relative;
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (img != null) {
Point p = getImageLocation();
g.drawImage(img, p.x, p.y, this);
}
}
}
}
Take a look at Performing Custom Painting and 2D Graphics for more details

Related

Why is the rectangle not showing?

I checked this code for hours, but the rectangle is not showing, can anyone tell me why it is not showing?:
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.event.KeyEvent;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
public class Main {
public static void main(String[] args) {
JFrame frame = new JFrame();
int resx = 700,resy = 500;
frame.setSize(resx,resy);
frame.setLocationRelativeTo(null);
frame.setTitle("Game");
frame.setResizable(false);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new FlowLayout());
try {
frame.setContentPane(new JLabel(new ImageIcon(ImageIO.read(new File("C:\\Users\\ivans\\Pictures\\Cookies.png")))));
} catch (IOException e) {
}
frame.repaint();
frame.setLayout(new FlowLayout());
frame.add(new JPanel(){
#Override
public void paintComponent(Graphics g){
super.paintComponent(g);
g.setColor(Color.WHITE);
g.fillRect(50,50,450,650);
}
}, BorderLayout.CENTER);
frame.repaint();
frame.setVisible(true);
}
}
Every time I try to activate the background, the rectangle is not shown, and every time I activate the rectangle, the background is not shown. Please help!
You're setting the JFrame's contentPane to a JLabel, a container that uses no layout, and so adding a component to it will not allow that component to be displayed unless you fully specify that component's size and position, i.e., its bounds. This is one reason I avoid using JLabels for contentPanes (also that it will not set its preferred size based on the components it holds) and instead in general prefer to do my drawing in a background JPanel's paintComponent method.
Side recommendations:
You've too much going on in the main method -- unless this program is not for anything other than demonstration purposes
You set the JFrame's original contentPane (a JPanel) to FlowLayout, but understand that this is meaningless once you change the contentPane.
Despite your assuming that the contentPane uses FlowLayout, you're trying to add the drawing JPanel into a BorderLayout position, something that doesn't make sense.
You have an empty catch block, something that almost never should be done.
Get your images as resources, not files.
Avoid using absolute file paths and prefer use of relative paths to resources.
Don't set sizes of things if you can avoid it.
Avoid so-called "magic numbers", e.g., g.fillRect(50,50,450,650); as this makes your code hard to debug and enhance.
For example, something like:
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;
#SuppressWarnings("serial")
public class ShowRectangle extends JPanel {
private static final int RECT_X = 50;
private static final int RECT_Y = RECT_X;
private static final int RECT_W = 200;
private static final int RECT_H = 200;
private static final String URL_SPEC = "https://duke.kenai.com/guitar/DukeAsKeith-daylightSmall.png";
private BufferedImage img;
public ShowRectangle(BufferedImage img) {
this.img = img;
}
// have same JPanel draw image and graphic element
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (img != null) {
g.drawImage(img, 0, 0, this);
}
// avoid magic numbers
// g.fillRect(50,50,450,650);
g.fillRect(RECT_X, RECT_Y, RECT_W, RECT_H);
}
// Size the JPanel to the image size
#Override
public Dimension getPreferredSize() {
if (isPreferredSizeSet() || img == null) {
return super.getPreferredSize();
}
return new Dimension(img.getWidth(), img.getHeight());
}
private static void createAndShowGui(BufferedImage image) {
ShowRectangle mainPanel = new ShowRectangle(image);
JFrame frame = new JFrame("ShowRectangle");
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.getContentPane().add(mainPanel);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String[] args) {
try {
URL imageUrl = new URL(URL_SPEC);
BufferedImage img = ImageIO.read(imageUrl);
SwingUtilities.invokeLater(() -> createAndShowGui(img));
} catch (IOException e) {
e.printStackTrace();
System.exit(-1);
}
}
}
If you avoid using "magic" numbers for instance, it's easy to make the black rectangle draggable, since it is now be drawn by variable values, values that you can change inside of a MouseAdapter (MouseListener and MouseMotionListener combined). For example:
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;
#SuppressWarnings("serial")
public class ShowRectangle extends JPanel {
private static final int RECT_X = 50;
private static final int RECT_Y = RECT_X;
private static final int RECT_W = 200;
private static final int RECT_H = 200;
private static final String URL_SPEC = "https://duke.kenai.com/guitar/DukeAsKeith-daylightSmall.png";
private int rectX = RECT_X;
private int rectY = RECT_Y;
private BufferedImage img;
public ShowRectangle(BufferedImage img) {
this.img = img;
MouseAdapter myMouse = new MyMouse();
addMouseListener(myMouse);
addMouseMotionListener(myMouse);
}
// have same JPanel draw image and graphic element
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (img != null) {
g.drawImage(img, 0, 0, this);
}
// avoid magic numbers
// g.fillRect(50,50,450,650);
g.fillRect(rectX, rectY, RECT_W, RECT_H);
}
// Size the JPanel to the image size
#Override
public Dimension getPreferredSize() {
if (isPreferredSizeSet() || img == null) {
return super.getPreferredSize();
}
return new Dimension(img.getWidth(), img.getHeight());
}
private class MyMouse extends MouseAdapter {
private Point p1;
private Point rectP = null;
#Override
public void mousePressed(MouseEvent e) {
p1 = e.getPoint();
if (new Rectangle(rectX, rectY, RECT_W, RECT_H).contains(p1)) {
rectP = new Point(rectX, rectY);
}
}
#Override
public void mouseDragged(MouseEvent e) {
moveRect(e.getPoint());
}
#Override
public void mouseReleased(MouseEvent e) {
moveRect(e.getPoint());
rectP = null;
}
private void moveRect(Point p2) {
if (rectP == null) {
return;
}
rectX = rectP.x + p2.x - p1.x;
rectY = rectP.y + p2.y - p1.y;
repaint();
}
}
private static void createAndShowGui(BufferedImage image) {
ShowRectangle mainPanel = new ShowRectangle(image);
JFrame frame = new JFrame("ShowRectangle");
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.getContentPane().add(mainPanel);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String[] args) {
try {
URL imageUrl = new URL(URL_SPEC);
BufferedImage img = ImageIO.read(imageUrl);
SwingUtilities.invokeLater(() -> createAndShowGui(img));
} catch (IOException e) {
e.printStackTrace();
System.exit(-1);
}
}
}
Its there just it was going out of boundary and hence not visible.
replace these two lines and check
g.setColor(Color.BLACK);
g.fillRect(0,0,250,250);
Try this,
#Override
public void paintComponent(Graphics g){
super.paintComponent(g);
Rectangle clipBounds = g.getClipBounds();
System.out.println(clipBounds.getX() +" "+ clipBounds.getY() + " "+ clipBounds.getHeight() + " " + clipBounds.getWidth());
g.setColor(Color.BLACK);
g.fillRect(0,0,450,450);
}
You will get 0.0 0.0 10.0 10.0
as output meaning the fill reactangle container is starting from 0,0 till 10,10 and hence it was not shown
Change the layout to GridLayout() will solve your problem,
frame.setLayout(new GridLayout());
frame.add(new JPanel(new GridLayout()){
/**
*
*/
private static final long serialVersionUID = 1L;
#Override
public void paintComponent(Graphics g){
super.paintComponent(g);
Rectangle clipBounds = g.getClipBounds();
System.out.println(clipBounds.getX() +" "+ clipBounds.getY() + " "+ clipBounds.getHeight() + " " + clipBounds.getWidth());
g.setColor(Color.BLACK);
g.fillRect(frame.getWidth()/2,0,frame.getWidth(),frame.getWidth());
}
}, BorderLayout.CENTER);
As per doc,
void java.awt.Graphics.fillRect(int x, int y, int width, int height)
Fills the specified rectangle. The left and right edges of the rectangle are at x and x + width - 1. The top and bottom edges are at y and y + height - 1. The resulting rectangle covers an area width pixels wide by height pixels tall. The rectangle is filled using the graphics context's current color.
Parameters:
x the x coordinate of the rectangle to be filled.
y the y coordinate of the rectangle to be filled.
width the width of the rectangle to be filled.
height the height of the rectangle to be filled.
So that's the issue

How do you use an image as background and place an image in front of that?

I have tried loads of ways, but none of them succeeded. they either didn't show the image, or they made the background image disappear... do you have any suggestions? Here is my code:
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
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;
public class Main extends JFrame{
int x, y;
Image Dak;
Image Levels;
private Image dbImage;
private Graphics dbg;
public Main(){
setTitle("Help de Pieten");
setSize(2000, 720);
setResizable(true);
setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
try {
this.setContentPane(
new JLabel(new ImageIcon(ImageIO.read(new File("Image1.gif")))));
} catch (IOException e) {}
validate();
ImageIcon i = new ImageIcon("Image2.gif");
Levels = i.getImage();
x = 100;
y = 100;
}
public void paint(Graphics g){
dbImage = createImage(getWidth(), getHeight());
dbg = dbImage.getGraphics();
paintComponent(dbg);
g.drawImage(dbImage, 0, 0, this);
}
public void paintComponent(Graphics g){
g.drawImage(Levels, x, y, this);
repaint();
}
public static void main(String[] args) {
Main main = new Main();
}
}
So how do I get images in front of the background without making the background dissapear?
To start with, avoid overriding the paint methods of top level containers like JFrame, they aren't double buffered and they have a complex component hierarchy with which you don't want to get involved with
Instead, start by extending from something JPanel, Swing components are double buffered by default, so you don't need to worry about implementing it all yourself, and overriding it's paintComponent method and performing your custom painting within it.
Have a look at Performing Custom Painting and Painting in AWT and Swing for more details.
Paint in Swing follows the "painters canvas" paradigm, that is, whatever is painted first, will be covered over by whatever is painted next, so to this end, make sure you paint your background first, followed by each layer in order you want it to appear.
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class Images {
public static void main(String[] args) {
new Images();
}
public Images() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
ex.printStackTrace();
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new TestPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class TestPane extends JPanel {
private BufferedImage background;
private BufferedImage foreground;
public TestPane() {
try {
background = ImageIO.read(new File("background image"));
foreground = ImageIO.read(new File("foreground image"));
} catch (IOException ex) {
ex.printStackTrace();
}
}
#Override
public Dimension getPreferredSize() {
return background == null ? new Dimension(200, 200) : new Dimension(background.getWidth(), background.getHeight());
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
if (background != null) {
int x = (getWidth() - background.getWidth()) / 2;
int y = (getHeight() - background.getHeight()) / 2;
g2d.drawImage(background, x, y, this);
}
if (foreground != null) {
int x = (getWidth() - foreground.getWidth()) / 2;
int y = (getHeight() - foreground.getHeight()) / 2;
g2d.drawImage(foreground, x, y, this);
}
g2d.dispose();
}
}
}

Window Resize event

I have a program that scales an image to the size of the screen. I currently have a component listener listening for a componentResized event, but this is not what I want. I would like the method to only be called one the user lift's there finger off their mouse, not as they are doing the resizing. This way, my image will not constantly be resizing to the user's specifications.
Thanks!
A solution is to supply a Swing Timer which is reset each time componentResized is called. This injects a small delay between the last resize event and the time you should perform the resize action.
import javax.swing.Timer;
//...
// Declare an instance variable...
private Timer resizeTimer;
//...
// Probably in you classes constructor
resizeTimer = new Timer(250, new ActionListener() {
public void actionPerformed(ActionEvent evt) {
// Actually perform the resizing of the image...
resizeBackgroundImage();
}
});
// Don't want a repeating event...
resizeTimer.setRepeats(false);
//...
public void componentResized(ComponentEvent evt) {
resizeTimre.restart();
}
This basically, sets it up so that it will require 250 milliseconds between resize events before an attempt is made to resize the image. You can play around with the value to suit your own needs.
Updated with runnable example
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.EventQueue;
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.event.ComponentAdapter;
import java.awt.event.ComponentEvent;
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 RescaleTest {
public static void main(String[] args) {
new RescaleTest();
}
public RescaleTest() {
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 BufferedImage master;
private Image scaled;
private Timer resizeTimer;
public TestPane() {
try {
master = ImageIO.read(new File("/path/to/your/image"));
scaled = master;
} catch (IOException exp) {
exp.printStackTrace();
}
resizeTimer = new Timer(250, new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
resizeBackground();
}
});
resizeTimer.setRepeats(false);
addComponentListener(new ComponentAdapter() {
#Override
public void componentResized(ComponentEvent e) {
resizeTimer.restart();
}
});
}
protected void resizeBackground() {
// This is not my preferred scaling process, I prefer to use
// a divide and conqure approach and do so in the background
// where possible, but this is beyond the scope of the question...
if (getWidth() < getHeight()) {
scaled = master.getScaledInstance(getWidth(), -1, Image.SCALE_SMOOTH);
} else {
scaled = master.getScaledInstance(-1, getHeight(), Image.SCALE_SMOOTH);
}
repaint();
}
#Override
public Dimension getPreferredSize() {
return master != null ? new Dimension(master.getWidth(), master.getHeight()) : new Dimension(200, 200);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (scaled != null) {
Graphics2D g2d = (Graphics2D) g.create();
int x = (getWidth() - scaled.getWidth(this)) / 2;
int y = (getHeight() - scaled.getHeight(this)) / 2;
g2d.drawImage(scaled, x, y, this);
g2d.dispose();
}
}
}
}
nb: The scaling used in this example is not my preferred method and was done for demonstration purposes only. See The Perils of Image.getScaledInstance() for details and Scale the ImageIcon automatically to label size for an alterantive approach...
If you put Toolkit.getDefaultToolkit().setDynamicLayout(false); right inside of main it will disable the frame from updating dynamically as you increase/decrease it's size. The ui will only be updated after you stop resizing.
import MainMenu.GameManager;
import java.awt.*;
import java.io.IOException;
public class Main {
Main(){
}
public static void main(String[] args) throws IOException {
GameManager manager = new GameManager();
Toolkit.getDefaultToolkit().setDynamicLayout(false);
}
}

Difference between Graphics object of getGraphics and paintComponent

If I'm working with a JPanel, what's the difference between the Graphics object returned by getGraphics, and the Graphics object that is passed in paintComponent method?
getGraphics
Can be null
Is a "snap shot" of the last paint process
Anything painted to it will be lost on the next paint cycle
You should avoid using getGraphics and simply use what is past to the paintComponent method.
In theory, there is no difference between them, but if you want what you have painted to survive between repaints, then you should be using paintComponent
Updated with example
Without an example code to go by I'm guessing...but...
Basically, this has a JPanel that acts as the primary "canvas" that draws an image and, when set, a Rectangle which acts as the selection.
It uses a second class as the MouseListener to actually make the decisions about what to paint
import java.awt.AlphaComposite;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Composite;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
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.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class MouseSelection {
public static void main(String[] args) {
new MouseSelection();
}
public MouseSelection() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
}
ImagePane imgPane = new ImagePane();
new MouseHandler(imgPane);
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new BorderLayout());
frame.add(imgPane);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class MouseHandler extends MouseAdapter {
private ImagePane imgPane;
private Point clickPoint;
public MouseHandler(ImagePane imgPane) {
this.imgPane = imgPane;
imgPane.addMouseMotionListener(this);
imgPane.addMouseListener(this);
}
#Override
public void mousePressed(MouseEvent e) {
imgPane.clearSelection();
clickPoint = e.getPoint();
}
#Override
public void mouseReleased(MouseEvent e) {
clickPoint = null;
}
#Override
public void mouseDragged(MouseEvent e) {
if (clickPoint != null) {
Point dragPoint = e.getPoint();
int x = Math.min(clickPoint.x, dragPoint.x);
int y = Math.min(clickPoint.y, dragPoint.y);
int width = Math.max(clickPoint.x, dragPoint.x) - x;
int height = Math.max(clickPoint.y, dragPoint.y) - y;
imgPane.setSelection(new Rectangle(x, y, width, height));
}
}
}
public class ImagePane extends JPanel {
private BufferedImage img;
private Rectangle selection;
public ImagePane() {
try {
img = ImageIO.read(new File("C:\\hold\\thumbnails\\issue459.jpg"));
} catch (IOException ex) {
ex.printStackTrace();
}
}
#Override
public Dimension getPreferredSize() {
return img == null ? new Dimension(200, 200) : new Dimension(img.getWidth(), img.getHeight());
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
if (img != null) {
int x = (getWidth() - img.getWidth()) / 2;
int y = (getHeight() - img.getHeight()) / 2;
g2d.drawImage(img, x, y, this);
}
if (selection != null) {
Color color = UIManager.getColor("Table.selectionBackground");
g2d.setColor(color);
Composite comp = g2d.getComposite();
g2d.setComposite(AlphaComposite.SrcOver.derive(0.5f));
g2d.fill(selection);
g2d.setComposite(comp);
g2d.draw(selection);
}
g2d.dispose();
}
protected void clearSelection() {
selection = null;
repaint();
}
protected void setSelection(Rectangle rectangle) {
selection = rectangle;
repaint();
}
}
}

Cannot draw transparent Component backgrounds

I have tried several tutorials and searches to figure out how to accomplish what I am trying to do. Basically I have a JLayeredPane with two Jpanels inside it. One for my game's drawing surface and one for my gui, like a pause menu. I have a png file with transparencies that I want to be the background of my gui panel that popups when the user hits escape. No matter what I do, the background of the panel (even tried making it just a component) is always grey with my png file drawn over it.
I have tried what others have recommended such as the following.
setBackground(new Color(0,0,0,0));
and
setOpaque(false);
Neither of these has seemed to help and perhaps I am failing to do something else after these. I have traditionally done them after the constructor or within the constructor of a class that extends jpanel.
I am almost to the point where I am going to have one panel and draw everything myself but I would much rather use the built in java functions like boxlayouts, etc.
Edit Adding Working Example:
import java.awt.BorderLayout;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Cursor;
import java.awt.Dimension;
import java.awt.DisplayMode;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GraphicsDevice;
import java.awt.GraphicsEnvironment;
import java.awt.Image;
import java.awt.Point;
import java.awt.Toolkit;
import java.awt.event.ComponentAdapter;
import java.awt.event.ComponentEvent;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.awt.image.BufferStrategy;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.BoxLayout;
import javax.swing.JFrame;
import javax.swing.JLayeredPane;
import javax.swing.JPanel;
public class Example {
private MyWindow gWindow;
public static void main(String argv[]) {
Example g = new Example();
g.gameLoop();
}
public Example() {
gWindow = new MyWindow();
// Initialize the keyboard listener
gWindow.frame().addKeyListener(new KeyListener() {
public void keyPressed(KeyEvent e) {
if(e.getKeyCode() == KeyEvent.VK_ESCAPE) // escape key, show menu
{
System.exit(0);
}
}
#Override
public void keyReleased(KeyEvent e) {
}
#Override
public void keyTyped(KeyEvent e) {
}
});
}
public void gameLoop() {
long lastLoopTime = System.currentTimeMillis();
while(true) {
// Used to calculate movement of sprites
long delta = System.currentTimeMillis() - lastLoopTime;
lastLoopTime = System.currentTimeMillis();
// Clear the canvas
Graphics2D g = (Graphics2D) gWindow.getBufferStrategy().getDrawGraphics();
g.setColor(Color.black);
g.fillRect(0,0,gWindow.frame().getWidth(), gWindow.frame().getHeight());
// Clean up graphics and flip buffer
g.dispose();
gWindow.getBufferStrategy().show();
// Small delay before next cycle
try { Thread.sleep(10); } catch (Exception e) {}
}
}
public class MyWindow {
private JFrame frame;
private JLayeredPane container;
private MyPanel gui;
private JPanel surface;
private Canvas canvas;
private GraphicsDevice vc;
private Dimension dm;
BufferedImage menuImg = null;
BufferedImage menuImgHighlight = null;
BufferedImage gSettings = null;
Font font = null;
public MyWindow() {
frame = new JFrame("Jumper");
vc = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice();
DisplayMode display = vc.getDisplayMode();
dm = new Dimension(display.getWidth(), display.getHeight());
container = new JLayeredPane();
gui = new MyPanel();
gui.setLayout(new BoxLayout(gui, BoxLayout.Y_AXIS));
surface = new JPanel(new BorderLayout(0,0));
frame.add(container, BorderLayout.CENTER);
container.add(surface, new Integer(0), 0);
container.add(gui, new Integer(1), 0);
init_resources();
canvas = new Canvas();
surface.add(canvas);
gui.setBackground(new Color(0,0,0,0));
gui.setVisible(true);
gui.setOpaque(false);
surface.setVisible(true);
setFullScreen(display);
frame.setResizable(false);
frame.setVisible(true);
frame.pack();
frame.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
frame.addComponentListener(new ComponentAdapter() {
#Override
public void componentResized(ComponentEvent e) {
setScreen(new Dimension(frame.getWidth(), frame.getHeight()));
frame.repaint();
}
});
canvas.setIgnoreRepaint(true);
canvas.createBufferStrategy(2);
canvas.setFocusable(false);
}
public JFrame frame() {
return frame;
}
public BufferStrategy getBufferStrategy () {
return canvas.getBufferStrategy();
}
public void setScreen(Dimension dim) {
int width = (int) dim.getWidth();
int height = (int) dim.getHeight();
this.dm = dim;
container.setPreferredSize(dm);
gui.setPreferredSize(dm);
surface.setPreferredSize(dm);
canvas.setBounds(0,0,width,height);
if(gSettings == null) {
gui.setBounds((int) ((dm.getWidth() - 200) / 2),
(int) ((dm.getHeight() - 200) / 2),
200,
200);
}
else {
gui.setBounds((int) ((dm.getWidth() - gSettings.getWidth()) / 2),
(int) ((dm.getHeight() - gSettings.getHeight()) / 2),
gSettings.getWidth(),
gSettings.getHeight());
}
gui.setBackground(gSettings);
surface.setBounds(0,0,width,height);
container.setBounds(0,0,width,height);
frame.validate();
}
public void setFullScreen(DisplayMode display) {
setScreen( Toolkit.getDefaultToolkit().getScreenSize());
frame.setUndecorated(true);
vc.setFullScreenWindow(frame);
if(dm != null && vc.isDisplayChangeSupported()) {
try {
vc.setDisplayMode(display);
}
catch(Exception e) {}
}
frame.validate();
}
private void init_resources() {
try {
gSettings = ImageIO.read(getClass().getResourceAsStream("/gui/settingsWindow.png"));
}
catch(Exception e)
{
System.out.print("Failed to load resources");
System.out.println();
}
}
}
public class MyPanel extends JPanel {
BufferedImage img = null;
public MyPanel() {
super();
setOpaque(false);
}
public void setBackground(BufferedImage img) {
this.img = img;
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if(img != null) {
Graphics2D g2d = (Graphics2D) g;
g2d.drawImage(img, 0, 0, null);
}
}
}
}
I've not tested this, but, instead of calling super.paintComponent at the end of you paint method, try calling at the start....
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if(img != null) {
Graphics2D g2d = (Graphics2D) g;
g2d.drawImage(img, 0, 0, null);
}
}
The reasoning for this, is one of the jobs of paintComponent is clear the graphics context and ready it to be painted on. Event if the component is transparent, it must still clear/wipe the graphics context of anything that has previously been painted on it. The graphics context is a shared resource, meaning that all the components within a given window may share the same graphics context, so it gets a little dirty if it's not "wiped" first ;)
You may also have issues with mixing heavy and light weight components, but seen as you adding the light weight components to the heavy weight component, it may not be an issue, but it's worth putting in the back of your mind... ;)
JComponent is transparent by default ;)
Try to apply some Physics over here...
The visible white color is combination of RGB max values...
If you are keeping RGB values to Minimum it will give you dark color (Black) and not the transparent one..
try to implement below methods..
(your component).setOpaque(false);
(your component).setContentAreaFilled(false);
(your component).setBorderPainted(false);
Hope so this will help you...

Categories