Drawing shapes over an ImagePanel

Ashwin Krishnamurthy Published at Dev

Ashwin Krishnamurthy

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

Braj

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().

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-9

Comments

0 comments

From Dev

Related Related

Article