I am working on a swing app (let us omit why).
I need to make a custom design of a scrollbar. So far so good, I implemented my descendant of ScrollBarUI - i have custom buttons, custom thumb, custom track... except of the area around my buttons - I added some padding there and I want to wrap all my scrollbar into a rectangle with rounded corners.
As I haven't found means to do that in ScrollBarUI, I decided to extend JScrollPane (to extend ScrollBar which is used there, so I could draw my rounded rectangle in paintComponent). This is what I made:
public class MyScrollPane extends JScrollPane {
public MyScrollPane(Component view) {
super(view);
}
#Override
public JScrollBar createVerticalScrollBar() {
return new MyScrollBar(JScrollBar.VERTICAL);
}
#Override
public JScrollBar createHorizontalScrollBar() {
return new MyScrollBar(JScrollBar.HORIZONTAL);
}
protected class MyScrollBar extends ScrollBar {
public MyScrollBar(int orientation) {
super(orientation);
setUI(MyScrollBarUI.createUI(this));
setOpaque(true);
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
int borderDiameterX = 32;
int borderDiameterY = 32;
g2.translate(this.getX(), this.getY());
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2.setColor(Color.gray);
g2.fillRoundRect(0, 0, getWidth() - 1, getHeight() - 1, borderDiameterX, borderDiameterY);
g2.translate(-this.getX(), -this.getY());
}
}
}
Unfortunately, this doesn't work:
if setOpacity(true) - it draws squares of default color around buttons
if setOpacity(false) - it doesn't draw background
Code is called, I checked. The inner elements of scrollbar - thumb, buttons are all fine.
What did I miss?
Ok. There were 3 issues in my code.
setOpacity must be false to prevent built-in background drawing.
g2.translate - not needed, mindlessly copied from ScrollBarUI code
super.paintComponent(g) - i moved it to the end of my paintComponent, otherwise drawing in MyScrollBarUI was behind my painted background.
So it looks like this now:
public class MyScrollPane extends JScrollPane {
public MyScrollPane(Component view) {
super(view);
}
#Override
public JScrollBar createVerticalScrollBar() {
return new MyScrollBar(JScrollBar.VERTICAL);
}
#Override
public JScrollBar createHorizontalScrollBar() {
return new MyScrollBar(JScrollBar.HORIZONTAL);
}
protected class MyScrollBar extends ScrollBar {
public MyScrollBar(int orientation) {
super(orientation);
setUI(MyScrollBarUI.createUI(this));
setOpaque(false);
}
public void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
int borderDiameter = 32;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2.setColor(Color.gray);
g2.fillRoundRect(0, 0, getWidth() - 1, getHeight() - 1, borderDiameter, borderDiameter);
super.paintComponent(g);
}
}
}
Related
I found a decorator pattern example with Swing component. The following code is drawing three buttons on a JFrame. One of the button has slash on it and implemented with Decorator pattern. The original one has paint() method, but I replaced paint() with paintComponent(Graphics g), then it fails to draw lines on the button. Is it impossible to use paintComponent() instead of paint()? If possible how to do that? What is the problem of this trial? What I am missing?
Original code link is Decorator pattern in Java.
public class DecoWindow extends JFrame implements ActionListener {
JButton Quit;
public DecoWindow() {
super("Deco Button");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel jp = new JPanel();
getContentPane().add(jp);
jp.add(new CoolDDecorator(new JButton("Cbutton")));
jp.add(new SlashDDecorator(new CoolDDecorator(new JButton("Dbutton"))));
jp.add(Quit = new JButton("Quit"));
Quit.addActionListener(this);
setSize(new Dimension(200, 100));
setVisible(true);
Quit.requestFocus();
}
public void actionPerformed(ActionEvent e) {
System.exit(0);
}
public static void main(String argv[]) {
new DecoWindow();
}
}
class DDecorator extends JComponent {
public DDecorator(JComponent c) {
setLayout(new BorderLayout());
add("Center", c);
}
}
class SlashDDecorator extends DDecorator {
int x1, y1, w1, h1;
public SlashDDecorator(JComponent c) {
super(c);
}
public void setBounds(int x, int y, int w, int h) {
x1 = x; y1 = y;
w1 = w; h1 = h;
super.setBounds(x, y, w, h);
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(Color.red);
g2d.drawLine(0, 0, w1, h1);
}
}
class CoolDDecorator extends DDecorator {
boolean mouse_over; //true when mose over button
JComponent thisComp;
public CoolDDecorator(JComponent c) {
super(c);
mouse_over = false;
thisComp = this; //save this component
//catch mouse movements in inner class
c.addMouseListener(new MouseAdapter() {
public void mouseEntered(MouseEvent e) {
mouse_over = true; //set flag when mouse over
thisComp.repaint();
}
public void mouseExited(MouseEvent e) {
mouse_over = false; //clear flag when mouse not over
thisComp.repaint();
}
});
}
//paint the button
public void paintComponent(Graphics g) {
super.paintComponent(g); //first draw the parent button
Graphics2D g2d = (Graphics2D) g;
//if the mouse is not over the button
//erase the borders
if (!mouse_over) {
Dimension size = super.getSize();
g2d.setColor(Color.lightGray);
g2d.drawRect(0, 0, size.width - 1, size.height - 1);
g2d.drawLine(size.width - 2, 0, size.width - 2, size.height - 1);
g2d.drawLine(0, size.height - 2, size.width - 2, size.height - 2);
}
}
}
paint() calls paintComponent() then paintChildren(). Your component is painting the slash and returning from paintComponent(). Then the default paint() implementation moves on, eventually painting the children, which are those buttons, which then just paint right ontop of your slash.
Your IDE should let you place a breakpoint in your paint code. You can check the callstack to see what's going on. If you aren't using an IDE, you can look at what Swing is doing by looking at JComponent.java in src.zip within your JDK.
Why do you want to use paintComponent() anyway?
My rectangle code:
class Rectangle extends JPanel {
int x = 105;
int y= 100;
int width = 50;
int height = 100;
public void paint(Graphics g) {
g.drawRect (x, y, width, height);
g.setColor(Color.WHITE);
}
Rectangle r = new Rectangle();
and I have a button "rotate". When the user presses the button with the mouse, the rectangle must rotate 15 degrees.
This is my action code:
public void actionPerformed(ActionEvent e){
Object source = e.getSource();
if( source == rotate){
AffineTransform transform = new AffineTransform();
transform.rotate(Math.toRadians(15), r.getX() + r.getWidth()/2, r.getY() + height/2);
r.add(transform);
}
}
But the code doesn't work. I don't know why? What do you think?
My edited-action-code part:
public void actionPerformed(ActionEvent e){
Object source = e.getSource();
if( source == rotate){
Paint p = new Paint();
panel1.add(r);
repaint();
}
}
class Paint extends JPanel {
public void paintComponent(Graphics g)
{
super.paintComponent(g);
Graphics2D g2d = (Graphics2D)g;
g2d.setColor(Color.WHITE);
g2d.translate(r.getX()+(r.WIDTH/2), r.getY()+(r.HEIGHT/2));
g2d.rotate(Math.toRadians(15));
r.equals(g2d);
repaint();
}
}
Custom painting is done by overriding the paintComponent() method, not paint(). Don't forget the super.paintComponent() at the start.
The paintComponent() method is where the painting is done so that is were you need the rotation code. So you could set a variable to indicate if you need to do the rotation or not. So all the ActionListener does is set the variable and then invoke repaint().
Or, I've never tried applying a rotation directly to the Rectangle (I've always applied it to the Graphics object in the painting method). Maybe you just need to invoke repaint() on the panel in your ActionListener. The panel won't know you've changed the Rectangle, so you need to tell it to repaint itself.
I have an image, with a complete transparent background. However when I draw this image, ingame, it has a kind of shade to it, and I have no clue why. I would like to get that out of there. Does anyone have an idea? I don't have the reputation to post images of it apparently... So I'll try to give some more information.
I have the Color.DARK_GRAY as background, and when I draw the image, you see a lighter gray square around it.
Then when I draw a couple of these images ontop of eachother, that square gets lighter and lighter.
If I draw the image ontop of another image however, this effect does not occur.
Here I load the image
public BlackChip() {
this.value = 500;
this.url = "res/images/poker/blackchip.png";
this.file = new File(url);
BufferedImage bi;
try {
bi = ImageIO.read(file);
this.image = bi;
} catch (IOException e) {
e.printStackTrace();
}
}
Here I draw the image
public void renderChip(Chip chip, int x, int y) {
g.drawImage(chip.getImage(), x, y, null);
}
Here I call that method
public void render() {
screen.renderBackground(Color.DARK_GRAY);
pokertable.render(Game.width / 2 - pokertable.getImage().getWidth(null) / 2, 50);
screen.renderChip(cs.getWhiteChip(), 380, 310);
screen.renderChip(cs.getRedChip(), 430, 310);
screen.renderChip(cs.getGreenChip(), 480, 310);
screen.renderChip(cs.getBlueChip(), 530, 310);
screen.renderChip(cs.getBlackChip(), 580, 310); //this one is it
}
link to the images:
https://drive.google.com/file/d/0Bz-4pfUssUeHRWkxaUhodWNILWc/edit?usp=sharing
Well... this doesn't work either because i need 10 reputation to post more then 1 link
you can see the effect on this link, it's the image with full transparent background, drawn multiple times.
I can't tell if this is the exact cause of the problem, because you haven't provided a MCVE but this method
public void renderChip(Chip chip, int x, int y) {
g.drawImage(chip.getImage(), x, y, null);
}
Just looks wrong. All custom painting should be done within the context of the provided Graphics object in the overridden paintComponent method. If you have not overriden paintComponent in a JPanel or a JComponent then you are likely not painting correctly. You may be doing something like
public class SomePanel extends JPanel {
private Graphics g;
public SomePanel() {
g = getGraphics();
}
}
Which is completely wrong. You should instead be doing something like
public class SomePanel extends JPanel {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
// do painting here
}
}
You Classes can then have it's own render method that takes a Graphics object as an argument. Then can be called in the paintComponent method. Maybe something like
public class Chip {
private JComponent imageObserver;
private BufferedImage chipImage;
int x, y;
public Chip(BufferedImage chipImage, int x, int y, JComponent imageObserver){
this.chipImage;
this.x = x;
this.y = y;
this.imageObserver = imageObserver;
}
public void renderChip(Graphics g) {
g.getImage(chipImage, x, y, imageObserver);
}
}
And your panel
public class SomePanel extends JPanel {
private List<Chip> chips;
public SomePanel() {
chips = new ArrayList<Chip>();
// add new Chips
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
for (Chip chip: chips) {
chip.renderChip(g);
}
}
}
I'm working on the GUI of my level editor that I built in JavaFX, and I want to be able to resize the canvas object to the new split pane dimensions. It seems that everything I've tried has failed. This includes passing the pane object in and using its width directly, using window size listeners and binding the width and height property to that of the split pane. Any ideas? This is what it looks like before a resize:
And after a resize:
Does anybody have any ideas? The code for the class is pretty extensive, but the code for the resizing will be included here:
public Canvas canvas;
public String tabTitle;
public VBox layout;
public GraphicsContext g;
public Core core;
public CanvasTab(Core core, String tabTitle){
this.core = core;
this.canvas = new Canvas(core.scene.getWidth() - 70, core.scene.getHeight() - 70);
layout = VBoxBuilder.create().spacing(0).padding(new Insets(10, 10, 10, 10)).children(canvas).build();
this.g = canvas.getGraphicsContext2D();
g.setFill(Color.BLACK);
g.fillRect(0, 0, canvas.getWidth(), canvas.getHeight());
HBox.setHgrow(layout, Priority.ALWAYS);
this.setContent(layout);
this.setText(tabTitle);
canvas.widthProperty().bind(layout.widthProperty().subtract(20));
canvas.heightProperty().bind(layout.heightProperty().subtract(20));
}
public CanvasTab(Canvas canvas){
this.canvas = canvas;
}
As James_D pointed out, you need to redraw the content of your canvas when resizing. This can be done by adding a listener to your canvas' width and height property as follows:
InvalidationListener listener = new InvalidationListener(){
#Override
public void invalidated(Observable o) {
redraw();
}
});
canvas.widthProperty().addListener(listener);
canvas.heightProperty().addListener(listener);
or in Java 8 using functional interfaces:
canvas.widthProperty().addListener(observable -> redraw());
canvas.heightProperty().addListener(observable -> redraw());
where redraw() is your own method which would look like this for your example (drawing a black rectangle:
private void redraw() {
g.setFill(Color.BLACK);
g.fillRect(0, 0, canvas.getWidth(), canvas.getHeight());
}
To make a JavaFx canvas resizable all that needs to be done is override the min/pref/max methods. Make it resizable and implement the resize method.
With this method no width/height listeners are necessary to trigger a redraw. It is also no longer necessary to bind the size of the width and height to the container.
public class ResizableCanvas extends Canvas {
#Override
public double minHeight(double width)
{
return 64;
}
#Override
public double maxHeight(double width)
{
return 1000;
}
#Override
public double prefHeight(double width)
{
return minHeight(width);
}
#Override
public double minWidth(double height)
{
return 0;
}
#Override
public double maxWidth(double height)
{
return 10000;
}
#Override
public boolean isResizable()
{
return true;
}
#Override
public void resize(double width, double height)
{
super.setWidth(width);
super.setHeight(height);
paint();
}
Note that the resize method cannot simply call Node.resize(width,height), because the standard implementation is effectivele empty.
I'm dragging component from one frame in main monitor to another frame in secondary monitor ,and while I'm dragging it the component painted in glasspane, I can see the glasspane over the main mointor ,but after the mouse reach the secondary monitor, the glasspane disappears? Can any one help me in this? How I can paint the glasspane over the secondary monitor?
Here is some pieces of my code:
public class Main_Frame extends JFrame
{
public Main_Frame (){
//adding the content of main JFrame
setGlassPane(new ImageGlassPane());
//detect other screens and making object of Second_Frame for each
}
}
public class Second_Frame extends JDialog{
public Second_Frame(){
super(new Frame(MultiMonitor.getInstance().getNextDevice().getDefaultConfiguration()),
Title, false);
setGlassPane(new ImageGlassPane());
}
}
public class ImageGlassPane() extends JPanel{
public ImageGlassPane() {
setOpaque(false);
}
protected void paintComponent(Graphics g) {
if ( !isVisible()) {
return;
}
Graphics2D g2 = (Graphics2D) g.create();
g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha));
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
int x = (int) (location.getX() - (width * zoom / 2));
int y = (int) (location.getY() - (height * zoom / 2));
if (visibleRect != null) {
g2.setClip(visibleRect);
}
if (visibleRect != null) {
Area clip = new Area(visibleRect);
g2.setClip(clip);
}
g2.drawImage(image, x, y, (int) (width * zoom), (int) (height * zoom), null);
}
}
However you are painting the component in the glass pane on the first frame, you will need to do for the second frame as well. This sounds like it is not a two monitor issue, but a two frame issue instead.