Detecting when multiple Ellipse objects are being clicked

Question

I am working on a version of the Squares game. For it I need to detect when my Ellipses are being clicked. But the problem is my method is using one Ellipse object. How can I detect which Ellipse is being clicked? Here is my code.

Main Squares class

public static boolean running = false;

public Squares() {

    this.setSize(600, 600);
    this.setTitle("Squares");
    this.setDefaultCloseOperation(EXIT_ON_CLOSE);
    this.setContentPane(new SquarePane());
    this.setLocationRelativeTo(null);
    this.setVisible(true);
}

public static void main(String[] args) {

    try {
        new Squares();
    } catch (Exception e) {
        e.printStackTrace();
        System.out.println("Crashed");
        System.exit(-1);
    }

    running = true;
}

}

SquaresPanel Class

public static int x = 100;
public static int y = 100;

public static Color randomColor;

public static float r;
public static float g;
public static float b;

public void paintComponent(Graphics gra) {

    Graphics2D g2d = (Graphics2D) gra;

    gra.setColor(Color.black);
    gra.fillRect(0, 0, 600, 600);

    Random rand = new Random();

    for (int i = 0; i < 8; i++) {
        for (int j = 0; j < 8; j++) {

            Ellipse2D oval = new Ellipse2D.Double(x, y, 10, 10);

            r = rand.nextFloat();
            g = rand.nextFloat();
            b = rand.nextFloat();

            randomColor = new Color(r, g, b);

            g2d.setColor(randomColor);
            g2d.fill(oval);

            x += 50;
        }

        x = 100;
        y += 50;
    }
}

Thanks guys!

Will

Paul Samsotha · Answer 1 · 2014-04-25T09:27:27.610

Without looking too much at your code (as I see it's lacking alot) I will just explain how your requirement can be achieve.

1st : You need a MouseListener and implement the mousePressed. From the MouseEvent object, you can obtain the point clicked. See How to Write MouseListener if you are unsure.

public void mousePressed(MouseEvent e) {
    Point p = e.getPoint();
}

2nd: Keep a List of your ellipses

List<Ellipse2D> ellipses;

3rd: Keep a selectedEllipse variable to hold the select one.

Ellipse2D selectedEllipse;

4th: After clicking the point, you loop through the list, checking if each Ellipse2D.contains the point. Then do something with the selected Ellipse

public void mousePressed(MouseEvent e) {
    Point p = e.getPoint();
    for (Ellipse2D ellipse : ellipses) {
        if (ellipse.contains(p) {
            selectedEllipse = ellipse;
            // do something with selectedEllipse
            break;
        } else {
            selectedEllipse = null;
        }
    }
}

5th: Loop through your ellipses to paint the in the paintComponent method

protected void paintComponent(Grapchics g) {
    super.paintComponent(g);
    Graphics2D g2 = (Graphics2D)g;
    for (Ellipse2D ellipse : ellipses) {
        g2.fill(ellipse):
    }
}

Side Notes

You must call super.paintComponent in your paintComponent method

protected void paintComponent(Graphics g) {
    super.paintComponent(g);
}

UPDATE

After taking a closer look at your code, I see more of what you are trying to achieve. Looks like you want am 8 by 8 grid of your ellipses. Another option is just to create 64 panels. and paint each of them.

First have a panel class where you can set the color

public class EllipsePanel extends JPanel {
    private Color color;

    public EllipsePanel(Color color) {
        this.color = color;
    }

    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.setColor(color);
        g.fillOval(0, 0, getWidth(), getHeight());
    }
}

Then you can use a panel to hold all those panel and use a GridLayout, but also keeping a JPanel[][] so you can easily refer to each panel. You can also a add a mouselistener to each panel

JPanel gridPanel = new JPanel(new GridLayout(8, 8));
EllipsePanel[][] panels = new EllipsePanel[8][8];
EllipsePanel selectedPanel = null;
int currentRow;
int currentCol;
...
for (int i = 0; i < 8; i++) {
    for (int j = 0; i < 8; j++) {
        final EllipPanel panel = new EllipsePanel(getRendomColor);
        panel.addMouseListener(new MouseAdapter(){
            public void mousePressed(MouseEvent e) {
                selectedPanel = panel;
                // do something with selected panel;
            }
        });
        gridPanel.add(panel);
    }
}

+1 for `contains()`; related examples with scaling are cited [here](http://stackoverflow.com/a/7142109/230513). — trashgod, Apr 25 '14 at 12:36

score 0 · Answer 2 · answered Apr 25 '14 at 08:49

0

You should implement a mouse listener on your JPannel, and then use the position clicked retrieved from the listener to work out which ellipse was clicked

answered Apr 25 '14 at 08:49

Lex Webb

2,772
2
21
36

Detecting when multiple Ellipse objects are being clicked

2 Answers2