在 JavaFX 中按下按鈕時如何創建隨機圓圈位置？

Question

我正在嘗試從 Udemy 課程中學習 Java，並且在進入以下部分之前，我被要求創建一個作業。

任務是編寫一個 JavaFX 應用程序，該應用程序顯示一個圓圈和一個按鈕，每次按下所述按鈕時，圓圈應移動到隨機位置。

到目前為止，我已經創建了一個代碼來計算我單擊按鈕的次數，現在我想將圓圈與計數一起移動：

public class CircleJumper extends Application {

    // Declare Variables
    private int count;
    private Circle initCircle;
    private Button initButton;
    private Text countText;

    /*
    *
    * Write function here
    *
    */
    @Override
    public void start(Stage primaryStage){

        // Initiate Variables
        count = 0;
        initCircle = new Circle(30, -50, 30);
        initButton = new Button("Click Me!");
        countText = new Text("Clicks: 0");
        // Here its where I built the click counter
        initButton.setOnAction((event) -> {
            count++;
            countText.setText("Pushes: " + count);
        });        
        ;
        Group baseDemo = new Group(initButton, countText);

        FlowPane pane = new FlowPane(baseDemo, initCircle);
        pane.setAlignment(Pos.CENTER);
        pane.setHgap(20);
        pane.setStyle("-fx-background-color: cyan");

        Scene scene = new Scene(pane, 600, 300);

        primaryStage.setTitle("Draw a Circle when Button is Pressed");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        // TODO code application logic here
        launch(args);
    }

}

更新：我決定將我的變量計數聲明為 = Math.random(); 並創建了一個圓圈。 之后，單擊按鈕應該會獲取生成的 Math.random 並將其放入 setTranslate 中，對嗎？

    public void start(Stage primaryStage){

        // Initiate Variables
        count = Math.random();
        initCircle = new Circle(30, 50, 30);
        initButton = new Button("Click Me!");

        Group circlePos = new Group(initCircle);
        circlePos.setTranslateX(10);
        circlePos.setTranslateY(10);

        initButton.setOnAction((event) -> {
            count++;
            circlePos.setTranslateY(count);
            circlePos.setTranslateX(count);
        });

        Group baseDemo = new Group(initButton);

        FlowPane pane = new FlowPane(baseDemo, initCircle);
        pane.setAlignment(Pos.CENTER);
        pane.setHgap(20);
        pane.setStyle("-fx-background-color: cyan");

        Scene scene = new Scene(pane, 600, 300);

        primaryStage.setTitle("Draw a Circle when Button is Pressed");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

Answer 1

首先自己嘗試一下，但我會發布一個解決方案，以便您可以看到它是如何完成的，以防您遇到困難。

1. 在您的應用程序初始化方法中創建一個隨機數
2. 在增加點擊次數的地方， 使用random.nextInt(bound)從隨機數中獲取幾個整數。
3. 將圓centerX和centerY設置為您的隨機值。
4. 完畢。

好的，還沒有完全完成，當你嘗試它時會發現問題（你應該這樣做）是它不起作用，圓圈似乎不會以你設置的 x 和 y 值為中心。 這是因為 Circle 位於布局窗格 (FlowPane) 中，它將忽略您的手動布局設置（盡管不轉換值）。 解決方案是將圓圈放入組中（作為第一項，使其位於所有內容下方），然后將流窗格放入組中，在 FlowPane 中您有您的按鈕並單擊計數器。

您可能希望將 translateX/Y 保留為 animation 而不是布局，盡管它可以用於移動形狀並且也可以因此使用。

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.Text;
import javafx.stage.Stage;

import java.util.Random;

public class CircleJumper extends Application {
    private static final double MAX_X = 600;
    private static final double MAX_Y = 300;

    private int clickCount = 0;
    private Random random;

    @Override
    public void init() {
        random = new Random();
    }

    @Override
    public void start(Stage stage){
        Circle circle = new Circle(MAX_X / 2, MAX_Y / 2, 30);
        Button button = new Button("Click Me!");
        Text clickCountText = new Text("Clicks: " + clickCount);

        button.setOnAction((event) -> {
            clickCount++;
            clickCountText.setText("Clicks: " + clickCount);

            circle.setCenterX(random.nextInt((int) MAX_X));
            circle.setCenterY(random.nextInt((int) MAX_Y));
        });        

        Group layout = new Group(
                circle,
                new FlowPane(button, clickCountText)
        );

        stage.setScene(new Scene(layout, MAX_X, MAX_Y, Color.CYAN));
        stage.setResizable(false);
        stage.show();
    }

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