I am setting background image for JButton or say JTableHeader. When I do paintComponent on the same, it's removing text value set for that component.
Any idea where I am going wrong?
JButton btn = new JButton(){
#Override
public void paintComponent(Graphics g){
Dimension size = this.getSize();
g.drawImage(Toolkit.getDefaultToolkit().getImage("C:\\User\\Downloads\\MainMenu.jpg"), 0, 0, size.width, size.height, this);
}
};
btn.setText("TEST WITH ME");
btn.setOpaque(true);
I am setting background image for JButton
The is no need to do custom painting. You just add an Icon to the button and the button will paint the image.
If you want text on top of the image then you just use the properties of the button:
button.setHorizontalTextPosition(...);
button.setVerticalTextPosition(...);
I may have not specified that much correct what I really wanted. But I figured out answer for that.
#Override
public void paintComponent(Graphics g){
Dimension size = this.getSize();
g.drawImage(Toolkit.getDefaultToolkit().getImage("C:\\User\\Downloads\\MainMenu.jpg"), 0, 0, size.width, size.height, this);
FontMetrics fm = g.getFontMetrics();
int x = (getWidth() - fm.stringWidth("String Value To Set")) / 2;
int y = ( (getHeight() - fm.getHeight() ) / 2) + fm.getAscent() ;
g.drawString(String Value To Set, x, y);
}
Related
I am having a hard time figuring out how to set up both graphics and buttons at thee same time without the buttons flickering.
I am trying to make a navigation program for my robot. I tried to add buttons to my program for the last week or two and nothing works out for me, thanks in advance!
Here is my code:
public static void main (String [] args) throws IOException{
image = ImageIO.read(new File("images/2020.jpg"));
double ratio = (double) image.getHeight() / (double) image.getWidth();
double Yscaled = (int) (Xscaled*ratio);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setSize((int) Xscaled+15 + 2*ButtonSpace + ButtonWidth,(int) Yscaled+34);
JButton clear = new JButton("Clear");
clear.setBounds((int)Xscaled+ButtonSpace, (int)Yscaled/4 - ButtonHeight/2, ButtonWidth, ButtonHeight);
window.add(clear);
cordList.add((int) Xs);
cordList.add((int) Ys);
JPanel painting = new JPanel() {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
y1 = Math.sin(Math.toRadians(a))*c;
x1 = Math.cos(Math.toRadians(a))*c;
y2 = -Math.cos(Math.toRadians(a))*h;
x2 = -Math.sin(Math.toRadians(a))*h;
g.drawImage(image, 0, 0, (int) Xscaled, (int) Yscaled, null);
if (cordList.size() > 0){
if (cordList.get(cordList.size()-2) > Xscaled || cordList.get(cordList.size()-1) > Yscaled){
cordList.remove(cordList.size()-2);
cordList.remove(cordList.size()-1);
}
}
for (int i = 0; i < cordList.size(); i+=2){
int size = 5;
g.setColor(new Color(220, 242, 19));
g.fillOval(cordList.get(i)-size/2, cordList.get(i+1)-size/2, size, size);
g.setColor(new Color(0, 0, 0));
g.drawOval(cordList.get(i)-size/2, cordList.get(i+1)-size/2, size, size);
if(i < cordList.size()-2){
g.drawLine(cordList.get(i), cordList.get(i+1), cordList.get(i+2), cordList.get(i+3));
}
}
Triangle_Shape triangleShape = new Triangle_Shape(new Point2D.Double(Xs - x1, Ys - y1),
new Point2D.Double(Xs + x1, Ys + y1), new Point2D.Double(Xs - x2, Ys + y2));
Graphics2D g2d = (Graphics2D) g.create();
g2d.draw(triangleShape);
g2.setColor(new Color(19, 191, 15));
g2.fill(triangleShape);
repaint();
}
};
painting.setBounds(0, 0 ,(int) Xscaled ,(int) Yscaled);
window.add(painting);
window.getContentPane().addMouseListener(new Field());
window.setVisible(true);
}
I had the same problem a few years ago. JPanels can be pretty helpful, but drawing on your JFrame and adding buttons without flickering only works with JLabels for some reason. Just try replacing the JPanel with a JLabel as shown:
public static void main(String[] args) {
// init Frame
JFrame window = new JFrame();
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setSize(800, 600);
// !! add Buttons before you add the JLabel to the Frame !!!!
JButton clear = new JButton("Clear");
window.add(clear);
clear.setBounds(100, 100, 100, 100);
// !! change to JLabel!!
JLabel painting = new JLabel() {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
// adds Antialising for rounded edges when adding text
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// test draw
g.setColor(Color.green);
g.fillRect(0, 0, 500, 500);
g.setColor(Color.black);
g.setFont(new Font("Consolas", 0, 100));
g.drawString("Test123'*#", 100, 300);
repaint();
}
};
window.add(painting);
window.setVisible(true);
}
Working Window without flickering
SIDENOTE: You need to add the buttons and other Components before you add the JLabel to the JFrame!
Also added Antialising as a small trick you can use for better visuals.
I Hope it'll help you!
I am trying to achieve the following
http://www.qksnap.com/i/3hunq/4ld0v/screenshot.png
I am currently able to draw rectangles successfully on a semi-transparent glasspane background using the following code:
protected void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g.setColor(Color.black); // black background
g.fillRect(0, 0, frame.getWidth(), frame.getHeight());
g2.setColor(Color.GREEN.darker());
if (getRect() != null && isDrawing()) {
g2.draw(getRect()); // draw our rectangle (simple Rectangle class)
}
g2.dispose();
}
Which works great, however, I would love to have the area within the rectangle be completely transparent while the outside was still darken much like the screenshot above.
Any ideas?
..have the area within the rectangle be completely transparent while the outside was still darken much like the screenshot above.
Create a Rectangle (componentRect) that is the size of the component being painted.
Create an Area (componentArea) of that shape (new Area(componentRect)).
Create an Area (selectionArea) of the selectionRectangle.
Call componentArea.subtract(selectionArea) to remove the selected part.
Call Graphics.setClip(componentArea)
Paint the semi-transparent color.
(Clear the clipping area if more paint operations are required).
As Andrew has suggested (just beat me while I was finishing off my example)
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g.create();
g.setColor(Color.black); // black background
Area area = new Area();
// This is the area that will filled...
area.add(new Area(new Rectangle2D.Float(0, 0, getWidth(), getHeight())));
g2.setColor(Color.GREEN.darker());
int width = getWidth() - 1;
int height = getHeight() - 1;
int openWidth = 200;
int openHeight = 200;
int x = (width - openWidth) / 2;
int y = (height - openHeight) / 2;
// This is the area that will be uneffected
area.subtract(new Area(new Rectangle2D.Float(x, y, openWidth, openHeight)));
// Set up a AlphaComposite
g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f));
g2.fill(area);
g2.dispose();
}
I have a translucent JPanel. I have created a custom JButton by extending JButton as I required a button with rounded corners and wanted to add some effects to it. I have made the button non-opaque. When I add this button to my translucent JPanel it apears fine. But on rollover a black patch is painted behind the button which looks really crappy. I searched the net for a solution but could'nt find a useful one . This problem is also described at http://www.java.net/node/661798 but i was not able really make kirillcool's suggestion work out.....Any help will be appreciated
I believe you need to add:
button.setContentAreaFilled( false );
not sure if someone is still interested...
you can fix the problem by overriding the paintComponent() method to let Java draw the JButton in any Shape you like. you just need to set the background of the Graphics object to transparent with setBackground() method. also you need to clear the Graphics object BEFORE drawing on it with clearRect() method and then fill it again with the alpha level of the background of your JButton. here is my piece of code.. it shows the overriden paintComponent(). by pasting it into your JButton you should get a JButton with rounded edges even if its on semi-transparant background
private int outerRoundRectSize = 10;
private int innerRoundRectSize = 8;
public void paintComponent(Graphics g)
{
int h = getHeight();
int w = getWidth();
Graphics2D g2d = (Graphics2D) g.create();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
Color GP = null;
//////////////get rid of the black background////////////////////////
g2d.setBackground(new Color(0,0,0,0.0f));
g2d.clearRect(0, 0, w, h);
g2d.setPaint(new Color(0,0,0,0.3f));
g2d.fillRect(0, 0, w, h);
//////////////get rid of the black background////////////////////////
ButtonModel model = getModel();
if(!model.isEnabled())
{
setForeground(Color.GRAY);
GP = new Color(0.5f,0.2f,0.6f);
}
else
{
setForeground(Color.WHITE);
if(model.isRollover())
{
GP = new Color(0.5f,0.2f,0.6f);
}
else
{
GP = new Color(0.0f,1.0f,0.0f);
}
}
g2d.setPaint(GP);
Color p1 = null;
Color p2 = null;
if(getModel().isPressed())
{
GP = new Color(1.0f,0.0f,0.0f);
g2d.setPaint(GP);
p1=new Color(0.12f,0.7f,0.3f);
p2=new Color(0.7f,0.5f,0.6f);
}
else
{
p1=new Color(0.0f,0.5f,0.7f);
p2=new Color(0.0f,1.0f,1.0f);
GP = new Color(0.0f,0.0f,1.0f);
}
RoundRectangle2D.Float r2d = new RoundRectangle2D.Float(0, 0, w - 1, h - 1, outerRoundRectSize, outerRoundRectSize);
Shape clip = g2d.getClip();
g2d.clip(r2d);
//g2d.fillRect(0, 0, w, h);
g2d.fillRoundRect(0, 0, w, h, outerRoundRectSize, outerRoundRectSize);
g2d.setClip(clip);
g2d.setPaint(p1);
g2d.drawRoundRect(0, 0, w - 1, h - 1, outerRoundRectSize,outerRoundRectSize);
g2d.setPaint(p2);
g2d.drawRoundRect(1, 1, w - 3, h - 3, innerRoundRectSize,innerRoundRectSize);
g2d.dispose();
super.paintComponent(g);
}
How to put image background on JPANEL?
JPanel pDraw = new JPanel(new GridLayout(ROWS,COLS,2,2));
pDraw.setPreferredSize(new Dimension(600,600)); //size of the JPanel
pDraw.setBackground(Color.RED); //How can I change the background from red color to image?
It is probably easiest to load the Image into an ImageIcon and display it in a JLabel, however:
To directly 'draw' the image to the JPanel, override the JPanel's paintComponent(Graphics) method to something like the following:
public void paintComponent(Graphics page)
{
super.paintComponent(page);
page.drawImage(img, 0, 0, null);
}
where img is an Image (possibly loaded through the ImageIO.read() call).
Graphics#drawImage is a heavily overloaded command which will allow you to be highly specific in how, how much, and where you paint the image to the component.
You can also get 'fancy' and scale the image to your pleasing using the Image#getScaledInstance method. This will take a -1 for either the width or the height parameter in order to keep the aspect ratio of the image the same.
Putting it in a more fancy way:
public void paintComponent(Graphics page)
{
super.paintComponent(page);
int h = img.getHeight(null);
int w = img.getWidth(null);
// Scale Horizontally:
if ( w > this.getWidth() )
{
img = img.getScaledInstance( getWidth(), -1, Image.SCALE_DEFAULT );
h = img.getHeight(null);
}
// Scale Vertically:
if ( h > this.getHeight() )
{
img = img.getScaledInstance( -1, getHeight(), Image.SCALE_DEFAULT );
}
// Center Images
int x = (getWidth() - img.getWidth(null)) / 2;
int y = (getHeight() - img.getHeight(null)) / 2;
// Draw it
page.drawImage( img, x, y, null );
}
Here's an explanation.
I have an application that extends a Frame. Then, it'll display a few lines of text using:
Font f = new Font("Arial", Font.PLAIN, 10);
g.setFont(f);
g.drawString("Test|great Yes ^.", x, y + 10);
Now what happens is that the text doesn't fit in the box around. E.g. I'm expecting the text to fit in [x,y]-[x+width, y+10] (don't care about the width) but it falls somewhat below the y+10 line. Now for most characters ('T', 'e', etc.) this fits but '|' and 'g' don't! They go below the y+10-line. It seems you can't use: draw at y + characterHeight. But what does work?
To see what I mean, here's some sample code:
import java.awt.*;
public class test extends Frame
{
public test()
{
/* retrieve max window size */
GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
GraphicsDevice[] gs = ge.getScreenDevices();
GraphicsConfiguration [] gc = gs[0].getConfigurations();
Rectangle r = gc[0].getBounds();
setSize(r.width, r.height);
setVisible(true);
}
public void paint(Graphics g)
{
final int windowWidth = getSize().width;
final int windowHeight = getSize().height;
g.setColor(Color.BLUE);
g.fillRect(0, 0, windowWidth, windowHeight);
g.setColor(Color.WHITE);
g.fillRect(0, 100, windowWidth, 110);
int textHeight = 100;
Font f = new Font("Arial", Font.PLAIN, textHeight);
g.setFont(f);
g.setColor(Color.BLACK);
g.drawString("Test|great Yes ^.", 10, 100 + textHeight);
}
public void guiLoop()
{
for(;;) { try { Thread.sleep(1000); } catch(Exception e) { } }
}
public static void main(String [] args)
{
new test().guiLoop();
}
}
I tried the following code as well:
public void paint(Graphics g)
{
final int windowWidth = getSize().width;
final int windowHeight = getSize().height;
g.setColor(Color.BLUE);
g.fillRect(0, 0, windowWidth, windowHeight);
g.setColor(Color.WHITE);
g.fillRect(0, 100, windowWidth, 110);
int textHeight = 100;
String str = "Test|great Yes ^.";
Font f = new Font("Arial", Font.PLAIN, textHeight);
Rectangle2D boundingRectangle = f.getStringBounds(str, 0, str.length(), new FontRenderContext(null, false, false));
f = f.deriveFont((float)(textHeight * (textHeight / boundingRectangle.getHeight())));
boundingRectangle = f.getStringBounds(str, 0, str.length(), new FontRenderContext(null, false, false));
g.drawString(str, 10, 100 + (int)boundingRectangle.getHeight());
g.setFont(f);
g.setColor(Color.BLACK);
g.drawString(str, 10, 100 + textHeight);
}
This is somewhat better: the text is smaller so it might fit, but there's still the problem that the y-position is incorrect.
All help is appreciated!
What about using FontMetrics? You can obtain it from Graphics object with g.getFontMetrics().
Than you can retrieve max descent or ascent or directly height (using getHeight), so your implementation will be font-indipendent and it should work fine.. check documentation here!
EDIT (to explain comments):
there is no a direct way to tell to a string to draw itself in a manner that can fit a box. You have to do it by yourself.. like start from a max font size and check if width fits the box, otherwise decrement size and try again. For height you should FIRST decide (or obtain) max font height, then you can set how many pixel should the box be.
I think I solved it somewhat:
boundingBoxHeight: height of box in which the text should fit
yOffset where to start drawing the font
Font f = new Font("Arial", Font.PLAIN, boundingBoxHeight);
g.setFont(f);
FontMetrics fm = g.getFontMetrics();
double shrink = ((double)textHeight / (double)fm.getHeight());
double newSize = (double)textHeight * shrink;
double newAsc = (double)fm.getAscent() * shrink;
int yOffset = (int)newAsc - fm.getLeading();
f = f.deriveFont((float)newSize);
g.setFont(f);
g.drawString(str, 10, 100 + yOffset);
There's quite a bit of whitespace above the text though.