Java swing draw multiple click able shapes

Question

I need to make a program that will draw multiple circles/squares, and when they are clicked, the colours change to another random colour. I am unsure how to do this. At the moment I have one circle on a JPanel which has a mouse listener to repaint when the panel is clicked within the bounds of the circle (although this creates a rectangular area to click in, not circular) and I need to extend this to add more shapes that have their own area to be clicked. Any help appreciated. Thanks.

public class CircleGUI extends JFrame {
int ovalWidth = 100;
int ovalHeight = 100;
int ovalX = 100;
int ovalY = 100;

public CircleGUI() {
    super("Circle GUI");
    this.setSize(500, 500);
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    go();
    this.setVisible(true);
}

public void go() {

    CPanel panel = new CPanel();
    Container container = getContentPane();
    container.add(panel);
    panel.addMouseListener(new MouseListener() {

        @Override
        public void mouseClicked(MouseEvent e) {
            int radius = ovalWidth / 2;
            int centerX = ovalX + radius;
            int centerY = ovalY + radius;

            if (((e.getX() >= centerX - radius && e.getX() <= centerX + radius) && e.getX() >= centerX - radius
                    && e.getX() <= centerX + radius)) {
                repaint();
            }

        }

        @Override
        public void mouseEntered(MouseEvent arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void mouseExited(MouseEvent arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void mousePressed(MouseEvent arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void mouseReleased(MouseEvent arg0) {
            // TODO Auto-generated method stub

        }

    });

}

public class CPanel extends JPanel {
    public void paint(Graphics g) {
        // random colour
        g.setColor(new Color(Math.round(Math.random()), Math.round(Math.random()), Math.round(Math.random())));
        g.fillOval(ovalX, ovalY, ovalWidth, ovalHeight);
    }
}

}

Answer 1

I need to extend this to add more shapes that have their own area to be clicked

You need to keep a List of Objects that you want to paint. That object would contain information like shape and color.

In your paintComponent() method you iterate through the List and paint each shape.

You then add a MouseListener to your panel. When the mouse is clicked you then iterate through the List to find a shape that contains the point that was generated and you update the color of that object and then repaint the panel.

Check out the Draw On Component example from Custom Painting Approaches for an example of this approach. The example only paints Rectangles but should get you started.