如何使用 JavaFX 8 在图像上重叠 buttons/Text?

How to Overlap buttons/Text over an image with JavaFX 8?

我无法将 buttons/text 放置在我使用 JavaFX 8 的图像上。

我使用了 ImageViewer 来放置图像,但实际上我无法将其余部分放在图像的顶部。

我正在使用 setTranslateX,Y 来移动按钮,但它永远不会重叠。

请告诉我如何解决这个问题。

import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.scene.text.Text;


public class Main extends Application{


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


    public void start(Stage stage) throws Exception {

        int x = 450;
        int y = 450;

        Image image = new Image("space.jpg",x,y, false, false);
        ImageView iv1 = new ImageView();
        iv1.setImage(image);
        iv1.setPreserveRatio(true);
        iv1.setFitHeight(x);
        iv1.setFitWidth(y);


        Text text = new Text("hello");
        text.setFont(Font.font ("Arial", 27));

        Button button = new Button("Hello");
        button.setTranslateX(10);
        button.setTranslateY(10);
        button.setContentDisplay(ContentDisplay.TOP);


        HBox root = new HBox();


        root.getChildren().add(iv1);
        root.getChildren().add(text);
        root.getChildren().add(button);


        Scene scene = new Scene(root,x,y);

        stage.setTitle("Space Blaster (New Game)");
        stage.setScene(scene);
        stage.show();

    }
}

您可以使用StackPane来叠加两个节点。例如:

Button button = new Button("Hello");
Text text = new Text("hello");

HBox hbox = new HBox();
hbox.getChildren().addAll(button, text); // button will be left of text

Image image = new Image("space.jpg",x,y, false, false);
ImageView iv1 = new ImageView();

StackPane stackPane = new StackPane();
stackPane.getChildren().addAll(iv1, hbox); // hbox with button and text on top of image view

HBox root = new HBox();
root.getChildren().add(stackPane);

// etc

另一种方法是将控件(按钮和文本)放在某种窗格中(例如 HBox),然后 use CSS to set a background image 在窗格中。