由于单击按钮而调用JavaFX AnimationTimer时无法启动

Question

I am trying to add a 'start' button to a small animation of the earth orbiting the sun. My problem is the AnimationTimer never seems to recieve the start() call when I click the button.

When the Event for clicking the button is fired the animation timer should start, thus making graphics context (which is on the canvas) start to be drawled on.

I'm sure I've made a stupid mistake somewhere, but for the life of me I can't figure it out.

Here's the code:

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.control.Button;
import javafx.animation.AnimationTimer;

public class Orbit extends Application {

    private static int WINDOW_WIDTH  = 500;
    private static int WINDOW_HEIGHT = 500;

    private static int EARTH_RADIUS = 100;
    private static int EARTH_ORBIT_RADIUS = 128;

    private static int SUN_RADIUS = 100;

    public static void main(String[] args) { launch(args); }

    public void start(Stage stage) {
        stage.setTitle("Orbit");

        Group root = new Group();
        Scene theScene = new Scene(root);
        stage.setScene(theScene);

        Canvas canvas = new Canvas(WINDOW_WIDTH, WINDOW_HEIGHT);

        GraphicsContext gc = canvas.getGraphicsContext2D();

        Image earth = new Image("earth.png", EARTH_RADIUS, EARTH_RADIUS, false, false)
            , sun   = new Image("sun.png", SUN_RADIUS, SUN_RADIUS, false, false)
            , space = new Image("space.png");

        final long startNanoTime = System.nanoTime();

        final AnimationTimer timer = new AnimationTimer() {
            @Override
            public void handle(long currentNanoTime) {
                double t = (currentNanoTime - startNanoTime) / 1000000000.0;

                int centerX = (WINDOW_WIDTH - SUN_RADIUS) / 2
                  , centerY = (WINDOW_HEIGHT - SUN_RADIUS) / 2;

                double x = centerX + EARTH_ORBIT_RADIUS * Math.cos(t)
                     , y = centerY + EARTH_ORBIT_RADIUS * Math.sin(t);

                gc.drawImage(space, 0, 0);
                gc.drawImage(earth, x, y);
                gc.drawImage(sun, centerX, centerY);
            }
        };

        Button btn = new Button("Start");
        btn.setOnMousePressed(actionEvent -> timer.start());

        root.getChildren().addAll(btn, canvas);
        stage.show();
    }
}

Answer 1

Your canvas is on top of the button, preventing the button from receiving mouse events.

You can either:

reverse the order you add the components, so that the button appears on top of the canvas:

    root.getChildren().addAll(canvas, btn);

or make the canvas mouse-transparent (assuming you don't want to process mouse events on it):

    canvas.setMouseTransparent(true);

or use a VBox instead of a Group , so the components don't overlay each other:

    // Group root = new Group();
    VBox root = new VBox();