Hinzufügen eines Hintergrundbildes in JavaFX

1. Hinzufügen eines JavaFX-Hintergrundbilds mit CSS
2. Hinzufügen eines JavaFX-Hintergrundbildes mit BackgroundImage in Java
3. Zusammenfassung

In diesem Tutorial wird erläutert, wie Sie Hintergrundbilder in der JavaFX-Anwendung hinzufügen. Sie können auch den Beispielcodes folgen, die wir eingefügt haben, um Ihnen das Verständnis des Themas zu erleichtern.

Die grundlegende JavaFX-Anwendung enthält eine Primärstufe, eine Szene und einzelne Knoten. Die Szene organisiert die Wurzeln in einem Baumformat, und die Wurzel dieses Baums wird als Root Node bezeichnet.

Unsere Klasse muss die Klasse Application der javafx.application erweitern, um eine JavaFX-Anwendung zu erstellen. Dann müssen wir die Methode start() überschreiben.

Hier zeigen wir Ihnen, wie Sie dem Hintergrund einer JavaFX-Anwendung ein Bild hinzufügen. Dafür gibt es zwei Möglichkeiten: mit CSS und mit der Klasse BackgroundImage.

Hinzufügen eines JavaFX-Hintergrundbilds mit CSS

CSS ist eine Abkürzung für Cascading Style Sheets und wird zum Stylen von Webseiten verwendet. Darüber hinaus kann CSS auch zum Stylen von JavaFX-Anwendungen verwendet werden. Wir verwenden die folgenden CSS-Regeln, um das Hintergrundbild festzulegen und zu gestalten. Sie können je nach Bedarf weitere Regeln hinzufügen.

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

Wir können Inline-CSS-Regeln mit Hilfe der Methode setStyle() auf dem Root-Knoten verwenden. Inline-CSS ist großartig, wenn wir nur ein paar Regeln hinzufügen möchten. Der vollständige JavaFX-Code wird unten angezeigt.

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);
  }
}

Inline-CSS kann etwas umständlich und schwer verständlich werden, wenn wir viele Regeln haben. Stattdessen können wir eine separate CSS-Datei erstellen und diese Regeln zu dieser Datei hinzufügen. Der Inhalt der CSS-Datei wird unten angezeigt.

#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;
}

Wir haben in der CSS-Datei einen ID-Selektor verwendet, daher müssen wir dieselbe ID für das Stammverzeichnis unserer JavaFX-Anwendung festlegen. Dieser Vorgang kann mit der Eigenschaft setId() durchgeführt werden.

Wir können dieser CSS-Datei einfach einen Verweis hinzufügen, und die Regeln werden auf unsere Anwendung angewendet. Wir werden die Methoden getStylesheets() und add() in der Anwendungsszene verwenden, um die CSS-Datei zu verwenden. Der vollständige Code dafür ist unten aufgeführt.

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);
  }
}

Hinzufügen eines JavaFX-Hintergrundbildes mit BackgroundImage in Java

JavaFX bietet eine BackgroundImage-Klasse, eine bequeme Option, wenn wir kein CSS hinzufügen möchten. Der Konstruktor dieser Klasse nimmt ein Klassenobjekt Image und andere Hintergrundbildeigenschaften. Die Signatur des Konstruktors dieser Klasse wird unten gezeigt.

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

Wir verwenden die Standardposition und -größe und das Bild sollte nicht wiederholt werden. Wir müssen das BackgroundImage-Objekt verwenden, um eine Background-Klasseninstanz zu erstellen. Schließlich können wir mit setBackground() auf dem Root-Knoten das Bild auf den Hintergrund setzen. Der vollständige Code dafür ist unten dargestellt.

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);
  }
}

Zusammenfassung

JavaFX mag veraltet sein und durch andere neuere Technologien ersetzt werden, aber es kann immer noch für verschiedene Zwecke verwendet werden. Wir können das Hintergrundbild in einer JavaFX-Anwendung mithilfe von CSS-Regeln festlegen. Wir können CSS auch direkt auf die Knoten anwenden, indem wir die Methode setStyle() verwenden.

Wenn wir mehr Regeln haben, können wir auch eine externe CSS-Datei verwenden. JavaFX bietet auch eine BackgroundImage-Klasse, um den Hintergrund einfach mit einfachem Java einzustellen.