Drawing shapes over an ImagePanel

Question

I am new to swing and I have been following the tutorials at the Oracle website. So I have an imagePanel class using which, I paint an image onto a JPanel. Next, I need to draw shapes over this image. So I call the drawShapes function in the paintComponent method of the imagePanel class. The issue that I am facing is, whenever I draw any shape say rect or oval it doesnt not draw the shape according to the position I specify for the y-axis. It only takes the x-axis into account. So ideally,

fillOval(30,70,10,10) is tantamount to fillOval(30,30,10,10) Am i doing something wrong or is there some way to overcome this?

    public class ImagePanel extends JPanel {
    private Image img;
    public ImagePanel(String loc)
    {
        this(new ImageIcon(loc).getImage());
    }

    public ImagePanel(Image img) {
        this.img = img;
        Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));
        setPreferredSize(size);
        setMinimumSize(size);
        setMaximumSize(size);
        setSize(size);
        setLayout(null);    
    }

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(img, 0, 0, null);
        renderShapes(g);
    }
private void renderShapes(g){
 Graphics2D g2d = (Graphics2D)g;
 g2d.fillOval(20,70,10,10);
 g2d.fillRect(120,40,10,10);    
}
}

EDIT The renderShapes method for the screenshot provided is posted below.

 private void renderShapes(g){
     Graphics2D g2d = (Graphics2D)g;
     g2d.fillRect(220,50,10,10);
     g2d.fillRect(20,140,10,10);    
    }

enter image description here

Code looks reasonable to me. Post a [SSCCE](http://www.sscce.org/) that demonstrates the problem. — camickr, May 21 '14 at 20:11
@camickr I have added a screenshot and the associated code for it, let me know if that helps. — Ashwin Krishnamurthy, May 21 '14 at 20:20
@peeskillet, This is the screenshot of the current code. I have included the portions which are causing the problem. This is a big application it has menus on the right, but all that is done in another `JPanel` so it has no effect over this. — Ashwin Krishnamurthy, May 21 '14 at 20:33
@AshwinGaneshK can you draw the grids as suggested by me to analyze it. — Braj, May 21 '14 at 20:35
@AshwinGaneshK, it is NOT the current code. There is no way you can have two different colored rectangles when you don't set the Graphics color. The point of a SSCCE is to simplify your code. You made a statement that the Graphics are not painted in the proper place. I doubt this very much. The problem is with your code. We don't have time to guess what you may, or may not be doing, which is why you need to post it. — camickr, May 21 '14 at 20:35
@camickr, You're right. The graphics color part is being handled by another method, where I pass this graphics object to set the color appropriately. — Ashwin Krishnamurthy, May 21 '14 at 20:37
@AshwinGaneshK I think 10 pixels may not be so large as shown in your screenshot. Look at my screenshot that is also 10 pixels wide. — Braj, May 21 '14 at 20:39
@AshwinGaneshK, `The graphics color part is being handled by another method` - exactly so you are doing some strange coding and you are probably making a mistake in that part of the code. — camickr, May 21 '14 at 20:40

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

You have to understand that how x, y coordinate works in Swing custom drawing to position the component.

Try to understand the below screenshot.

enter image description here

Find a sample code here to understand the same concept

Drawing: centering objects of different size

Try with this sample code to understand the x and y coordinate using grids separated by 10 pixels and look at the shapes whether is it at the correct position or not?

Sample code:

class DrawPanel extends JPanel {

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.setColor(Color.BLUE);
        for (int i = 0; i < getHeight(); i = i + 10) {
            g.drawLine(0, i, getWidth(), i);
        }
        for (int i = 0; i < getWidth(); i = i + 10) {
            g.drawLine(i, 0, i, getHeight());
        }

        g.setColor(Color.RED);
        g.fillOval(20, 70, 10, 10);
        g.setColor(Color.GREEN);
        g.fillRect(120, 40, 10, 10);
    }
}

DrawPanel drawPanel = new DrawPanel();
drawPanel.setBackground(Color.WHITE);

snapshot:

enter image description here

EDIT

Use JComponent#getPreferredSize() instead of setPreferredSize().

Read more Should I avoid the use of set(Preferred|Maximum|Minimum)Size methods in Java Swing?

edited Jun 20 '20 at 09:12

Community

1
1

answered May 21 '14 at 20:19

Braj

46,415
5
60
76

The OP understands x/y coordinates. The OP is questioning why his code doesn't paint at the specified coordinates. The OP is not posting the code he is executing. – camickr May 21 '14 at 20:32
Yes I am looking into OP code as well. Give me some time please. May be the grids will help the OP to understand the x,y position. – Braj May 21 '14 at 20:33
@camickr, I understand - I will paste the whole code. Just didnt want to bore you guys with a huge codebase. – Ashwin Krishnamurthy May 21 '14 at 20:35
1

@AshwinGaneshK, no you don't understand. I did not ask you for the entire code base. I asked for a `SSCCE!!!`. Braj posted a SSCCE. You post your version. There should be no difference. Compare your code with Braj's to see what is different. – camickr May 21 '14 at 20:38
@camickr, the coloring function had the problem. You were right all along. I apologize for pissing you off. – Ashwin Krishnamurthy May 21 '14 at 20:51
@Braj, Thank you for your answer. I have learnt so much more about positioning now. – Ashwin Krishnamurthy May 21 '14 at 20:52

Drawing shapes over an ImagePanel

1 Answers1

EDIT