Java - How to properly add several panels with background image?

Question

I'm trying to code a puzzle game in which content is displayed in two different panels:

-SplitTable: In this panel a couple of labels will display some relevant data. Half the size of SplitPanel and vertical, in the left side of screen.

-SplitPanel:Here a puzzle will be displayed in a panel which will be on top of the existing image.

-SplitMainView: Here everything is put together

-SplitCustomPanel: The code for the custom panels

Apparently everything works fine, but if you look closely and add some borders to the panels, you see that there is being an overlap of some sort.

What should i do to fix this and make them take the correct space?

public SplitTable(SplitModel model){
    this.model = model;
    setLayout(new GridLayout(1,6));

    java.net.URL urls = ClassLoader.getSystemResource("Imagenes/vertical.jpg");
    Toolkit kit = Toolkit.getDefaultToolkit();
    Image back = kit.createImage(urls);
    p = new SplitCustomPanel(back, 346, 900, 0, 0);
    p.setBorder(BorderFactory.createLineBorder(Color.BLACK, 2, true));
    la1 = new JLabel(" ");
    la2 = new JLabel(" ");
    la3 = new JLabel(" ");
    la4 = new JLabel(" ");
    la5 = new JLabel(" ");
    la6 = new JLabel(" ");
    p.add(la1);
    p.add(la2);
    p.add(la3);
    p.add(la4);
    p.add(la5);
    p.add(la6);
    add(p);}


public SplitPanel(SplitModel model){
    this.model = model;

    setLayout(new GridLayout(1,6));

    java.net.URL urls = ClassLoader.getSystemResource("Imagenes/tap1.jpg");
    Toolkit kit = Toolkit.getDefaultToolkit();
    Image back = kit.createImage(urls);
    p = new SplitCustomPanel(back, 1200, 900, 300, 0);
    p.setBorder(BorderFactory.createLineBorder(Color.BLACK, 2, true));        
    la1 = new JLabel(" ");
    la2 = new JLabel(" ");
    la3 = new JLabel(" ");
    la4 = new JLabel(" ");
    la5 = new JLabel(" ");
    la6 = new JLabel(" ");
    p.add(la1);
    p.add(la2);
    p.add(la3);
    p.add(la4);
    p.add(la5);
    p.add(la6);  
    add(p);}

public SplitMainView(SplitModel model){
    super("Splitter");

    java.net.URL urls = ClassLoader.getSystemResource("Imagenes/ese.jpg");
    Toolkit kit = Toolkit.getDefaultToolkit();
    Image imgs = kit.createImage(urls);
    this.setIconImage(imgs);

    this.model = model;
    JPanel p = new JPanel();

    p.setLayout(new GridBagLayout());

    GridBagConstraints ct = new GridBagConstraints();
    GridBagConstraints cp = new GridBagConstraints();

    ct.fill = GridBagConstraints.BOTH;
    cp.fill = GridBagConstraints.BOTH;

    ct.weightx = 1.0;
    ct.weighty = 1.0;
    cp.weightx = 1.0;
    cp.weighty = 1.0;

    ct.gridheight = 8;
    ct.gridwidth = 2;
    ct.gridx = 0;
    ct.gridy = 0;
    cp.gridheight = 8;
    cp.gridwidth = 8;
    cp.gridx = 0;
    cp.gridy = 2;

    menu = new SplitMenuBar();
    panel = new SplitPanel(model);
    table = new SplitTable(model);

    this.setJMenuBar(menu);
    p.add(table, ct);
    p.add(panel, cp);
    this.add(p);


    setVisible(true);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setExtendedState(getExtendedState() | JFrame.MAXIMIZED_BOTH);

public class SplitCustomPanel extends JPanel {

private Image back;
private int w;
private int h;
private int x;
private int y;

public SplitCustomPanel(Image backe, int w, int h, int x, int y) {
    this.back = backe;
    this.w = w;
    this.h = h;
    this.x = x;
    this.y = y;
}


@Override
public void paintComponent(Graphics g) {
    Graphics2D g2 = (Graphics2D) g;
    g2.drawImage(back, x, y, w, h, this);
}

This is how it looks like: https://i.stack.imgur.com/An0hg.jpg

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

As shown here, use getSubimage() to slice a pristine image along pixel boundaries. In the example, resize the frame to see how the borderless components align. Use drawImage() to merge the pieces, only if required. If so, invoke super.paintComponent() to avoid rendering artifacts.

edited May 23 '17 at 11:57

Community

1
1

answered Dec 12 '13 at 12:44

trashgod

203,806
29
246
1,045

Definitely useful for later matters but what I'm focused on now is on setting the background of the frame properly, solely, not yet with the puzzle itself, could you provide some advice on that? – KornÖzz Dec 12 '13 at 13:47
Sorry, I'm a little unclear on what you're trying to accomplish. Guessing it's a _reveal_ effect, you might look at the `SplitPaneDemo` in [`SwingSet2`](http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html). For sliding pieces, see this [example](http://stackoverflow.com/a/2562685/230513) and [variation](http://stackoverflow.com/a/2563350/230513). In your [sscce](http://sscce.org/), access posted images via `URL`, as shown [here](http://stackoverflow.com/a/10862262/230513). – trashgod Dec 12 '13 at 16:36

Java - How to properly add several panels with background image?

1 Answers1