Java Swing 图形和事件

Question

I am trying to make a simple game which displays circles on a frame and when clicked the circle should disappear. I am learning how Java Swing works and managed to draw a circle (Wow such an achievement) and figured out how events work. I added an mouseListener to the circle and when clicked for now I want a to get a console log that it has been clicked but the end result is not as expected. No matter where I click I always get the "click" console log. When I try to add a listener to a JButton for example I get the end result. Are events different for graphics?

import javax.swing.*;
import javax.swing.event.MouseInputListener;
import java.awt.*;
import java.awt.event.*;
import java.sql.SQLOutput;

public class CirclePop {

    JFrame frame;
    Circle circle;

    public static void main(String[] args) {
        CirclePop circlePop = new CirclePop();
        circlePop.drawFrame();
    }

    public void drawFrame() {
        frame = new JFrame();
        circle  = new Circle();

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(circle);

        circle.addMouseListener(new Click());

        frame.setSize(300, 300);
        frame.setVisible(true);
    }

    class Click implements MouseListener {

        @Override
        public void mouseClicked(MouseEvent e) {

        }

        @Override
        public void mousePressed(MouseEvent e) {
            System.out.println("Pressed");
        }

        @Override
        public void mouseReleased(MouseEvent e) {

        }

        @Override
        public void mouseEntered(MouseEvent e) {

        }

        @Override
        public void mouseExited(MouseEvent e) {

        }
    }
}

import java.awt.*;
import javax.swing.*;

class Circle extends JPanel {

    public void paintComponent(Graphics g) {

        g.setColor(Color.red);
        g.fillOval(150, 140, 30, 30);
    }
}

Answer 1

First of all, you may want to extend MouseAdapter instead of implementing MouseListener . This way you don't have "implement" all these empty methods.

Then, in your mousePressed method you just have to calculate if the click happened inside the circle. This is basically just Pythagoras:

static class ClickListener extends MouseAdapter {
    private final Circle circle;

    public ClickListener(Circle circle) {
        this.circle = circle;
    }


    @Override
    public void mousePressed(MouseEvent e) {
        int centerX = circle.getCenterX();
        int centerY = circle.getCenterY();
        int radius = circle.getRadius();
        int clickX = e.getX();
        int clickY = e.getY();

        // inside circle: (clickX - centerX)^2 + (clickY - centerY)^2 < radius^2
        double xSquare = Math.pow(clickX - centerX, 2);
        double ySquare = Math.pow(clickY - centerY, 2);

        if (xSquare + ySquare < radius * radius) {
            System.out.println("pressed");
        }
    }
}

I've added some fields to Circle class to get access to the properties you need for the calculation:

class Circle extends JPanel {
    private final int radius = 30;
    private final int centerX = 150;
    private final int centerY = 140;

    public void paintComponent(Graphics g) {
        g.setColor(Color.red);
        g.fillOval(centerX, centerY, radius, radius);
    }
    // getter, etc.
}

Answer 2

You have to implement the MouseListener interface indeed, and after a mouse click, you have to check whether the mouse position is contained in the region of your circle. You could do this manually, by comparing coordinates, but this could be a bit too much work.
I think it's easier to rather create a Shape object(Infact this is a good time to learn about it since you're just starting out) that you fill with the respective color, and then just check whether the circle contains the mouse position.
Also, check out the Shape class docs when you've got some spare time.

I've gone ahead and made changes to your code, it now uses an instance of Shape class to create a circle.
Also, instead of implementing the MouseListener interface, I recommend extending MouseAdapter since you're not actually providing any meaningful implementation to any method of the interface except the mousePressed() method.
Lastly, notice the shape.contains(event.getPoint()) in the mousePressed() method, that is what does the trick for checking the coordinates.
The rest of the code should be familiar.

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;

public class CirclePop {

    JFrame frame;
    Circle circle;
    public static void main(String[] args) {
        CirclePop circlePop = new CirclePop();
        circlePop.drawFrame();
    }

    public void drawFrame() {
        frame = new JFrame();
        circle  = new Circle();

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(circle);

        circle.addMouseListener(new Click());

        frame.setSize(300, 300);
        frame.setVisible(true);
    }

    class Click extends MouseAdapter {
        @Override
        public void mousePressed(MouseEvent e) {
            if (circle.shape.contains(e.getPoint())) {
                System.out.println("Pressed");
            }
        }
    }
}
class Circle extends JPanel {
    Shape shape;
    public void paintComponent(Graphics g) {
        Graphics2D g2 = (Graphics2D) g;
        shape = new Ellipse2D.Double(150, 140, 30, 30);
        g2.setColor(Color.red);
        g2.fill(shape);
    }
}

Answer 3

Okay, so, this isn't going to be short

Let's start with....

    frame = new JFrame();
    circle  = new Circle();

    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.getContentPane().add(circle);

    circle.addMouseListener(new Click());

    frame.setSize(300, 300);
    frame.setVisible(true);

Okay, seems simple enough, but, one thing you've missed is the fact that JFrame , by default, uses a BorderLayout - this means, it will make the child component (and the centre/default position) fill all the available space of the frames viewable space

You can see this if you do something like...

    frame = new JFrame();
    circle  = new Circle();
    circle.setBackground(Color.RED);

You will now see that the Circle component occupies the entire frame, so when you click on it, you're clicking the Circle component itself.

This isn't bad, but, you might want to change tact a little. Instead of adding the MouseListener independently of the Circle , have the Circle component make use of its own MouseListener , for example...

class Circle extends JPanel {

    public Circle() {
        addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent e) {
                // More to come...
            }
        });
    }
    
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);

        g.setColor(Color.red);
        g.fillOval(150, 140, 30, 30);
    }
}

This means you get to control much of the logic internally to the class, makes it easier to access some of the more critical information without needing to make a bunch of, potentially, dangerous casts.

So, now we just need to add the logic in to determine if the mouse was clicked within the desirable location or not...

public void mouseClicked(MouseEvent e) {
    Point point = e.getPoint();
    if (point.x >= 150 && point.x <= 150 + 30 && point.y >= 140 && point.y <= 140 + 30) {
        System.out.println("You clicked me :(");
    }
}

Okay, that's... basic

We can simplify it a little and make use of the available functionality within the wider API by making use of the "shapes" API, for example...

class Circle extends JPanel {
    
    private Ellipse2D dot = new Ellipse2D.Double(150, 140, 30, 30);

    public Circle() {
        addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent e) {
                Point point = e.getPoint();
                if (dot.contains(point)) {
                    System.out.println("You clicked me :(");
                }
            }
        });
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g.create();

        g2d.setColor(Color.red);
        g2d.fill(dot);
        g2d.dispose();
    }
}

The benefit of this, apart from contains , is we can change the position of the shape relatively easily and our if statement contains to work

I do, highly, recommend also having a look at

• Performing Custom Painting
• Painting in AWT and Swing
• 2D Graphics Trail
• Working with Geometry