迹忆客 专注技术分享

本文介绍如何在 JavaFX 应用程序中添加背景图像。你还可以按照我们包含的示例代码来帮助你理解该主题。

基本的 JavaFX 应用程序包含一个初级阶段、一个场景和各个节点。场景以树的形式组织根，这棵树的根被称为根节点。

我们的类必须扩展 javafx.application 的 Application 类以创建 JavaFX 应用程序。然后，我们需要覆盖 start() 方法。

在这里，我们将向你展示如何将图像添加到 JavaFX 应用程序的背景。有两种方法可以执行此过程：使用 CSS 和使用 BackgroundImage 类。

使用 CSS 添加 JavaFX 背景图像

CSS 是 Cascading Style Sheets 的缩写，用于设计网页样式。此外，CSS 还可用于设置 JavaFX 应用程序的样式。我们将使用以下 CSS 规则来设置和设置背景图像的样式。你可以根据需要添加更多规则。

-fx-background-image: url('image-url');
-fx-background-repeat: no-repeat; 
-fx-background-size: 500 500; 
-fx-background-position: center center;

我们可以在根节点上的 setStyle() 方法的帮助下使用内联 CSS 规则。如果我们只想添加一些规则，内联 CSS 非常棒。完整的 JavaFX 代码如下所示。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Main extends Application
{
    @Override
    public void start(Stage primaryStage)
    {
        StackPane root = new StackPane();
        Scene scene = new Scene(root, 650, 650);
        root.setStyle("-fx-background-image:                                                url('https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/ed5569e8-c0dd-458c-8450-cde6300093bd/File/a5023b0f0fb67f59176a0499af9021ed/java_horz_clr.png'); -fx-background-repeat: no-repeat; -fx-background-size: 500 500; -fx-background-position: center center;");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args)
    {
        launch(args);
    }
}

如果我们有很多规则，内联 CSS 会变得有点麻烦和难以理解。相反，我们可以创建一个单独的 CSS 文件并将这些规则添加到该文件中。CSS 文件的内容如下所示。

#stack-pane{
    -fx-background-image: url("https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/ed5569e8-c0dd-458c-8450-cde6300093bd/File/a5023b0f0fb67f59176a0499af9021ed/java_horz_clr.png");
    -fx-background-repeat: no-repeat;
    -fx-background-size: 500 500;
    -fx-background-position: center center;
}

我们在 CSS 文件中使用了 ID 选择器，因此我们必须为 JavaFX 应用程序的根设置相同的 ID。这个过程可以通过使用 setId() 属性来完成。

我们可以简单地添加对这个 CSS 文件的引用，规则将应用于我们的应用程序。我们将在应用场景中使用 getStylesheets() 和 add() 方法来使用 CSS 文件。完整的代码如下所示。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Main extends Application
{
    @Override
    public void start(Stage primaryStage)
    {
        StackPane root = new StackPane();
        root.setId("stack-pane");
        Scene scene = new Scene(root, 650, 650);
       scene.getStylesheets().add(String.valueOf(this.getClass().getResource("sample.css")));
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args)
    {
        launch(args);
    }
}

在 Java 中使用 BackgroundImage 添加 JavaFX 背景图像

JavaFX 提供了一个 BackgroundImage 类，如果我们不想添加 CSS，这是一个方便的选项。此类的构造函数采用 Image 类对象和其他背景图像属性。此类的构造函数的签名如下所示。

BackgroundImage(Image img, BackgroundRepeat repeatXAxis, BackgroundRepeat repeatYAxis,                                      BackgroundPosition pos, BackgroundSize size)

我们将使用默认位置和大小，图像不应重复。我们需要使用 BackgroundImage 对象来创建一个 Background 类实例。最后，我们可以使用根节点上的 setBackground() 将图像设置在背景上。完整的代码如下所示。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Main extends Application {
    @Override
    public void start(Stage primaryStage)
    {
        StackPane root = new StackPane();
        Scene scene = new Scene(root, 650, 650);
        Image img = new Image("https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/ed5569e8-c0dd-458c-8450-cde6300093bd/File/a5023b0f0fb67f59176a0499af9021ed/java_horz_clr.png");
        BackgroundImage bImg = new BackgroundImage(img,
                                                   BackgroundRepeat.NO_REPEAT,
                                                   BackgroundRepeat.NO_REPEAT,
                                                   BackgroundPosition.DEFAULT,
                                                   BackgroundSize.DEFAULT);
        Background bGround = new Background(bImg);
        root.setBackground(bGround);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

总结

JavaFX 可能已经过时并被其他较新的技术取代，但它仍然可以用于各种目的。我们可以使用 CSS 规则在 JavaFX 应用程序中设置背景图像。我们还可以使用 setStyle() 方法将 CSS 直接应用于节点。

如果我们有更多规则，那么我们也可以使用外部 CSS 文件。JavaFX 还提供了一个 BackgroundImage 类，可以轻松地使用纯 Java 设置背景。