Wie fügt man Hintergrundbild zu AnchorPane hinzu, indem man den Scene Builder in JavaFX verwendet?

Question

Wie fügen Sie ein Hintergrundbild zu einem AnchorPane mit Scene Builder?

Ich habe versucht, es so:

-fx-background-image url('C:/Users/Documents/page_background.gif') 

Wie ich diesen Satz in Scene Builder.

Und das erzeugte FXML:

<AnchorPane id="LoginAnchorPane" fx:id="LoginAnchorPane" prefHeight="400.0" prefWidth="600.0" style="-fx-background-image: url('C:/Users/Documents/page_background.gif');" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafx_lsdu.LoginController"> 

Answer 1

Sie können versuchen, es in Szene Builder direkt zu setzen, wie:

-fx-background-image: url('file:C:/Users/Documents/page_background.gif') 

Es erfordert das System/Protokoll angegeben werden.

Aber die vorgeschlagene Möglichkeit, CSS-Styling in einer CSS-Datei zu trennen. Zum Beispiel können Sie einen CSS-Stil-Klasse in Ihrer CSS-Datei erstellen (nennen wir es "application.css"):

application.css

.anchor { 
    -fx-background-image:url('file:/C:/Users/Documents/page_background.gif'); 
} 

Dann in der FXML Datei hinzufügen Sie dieses Stylesheet an die Wurzel und fügen Sie die anchor Stil-Klasse zum AnchorPane:

<AnchorPane prefHeight="545.0" prefWidth="712.0" styleClass="anchor" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.60"> 
    <stylesheets> 
    <URL value="@application.css" /> 
    </stylesheets> 
</AnchorPane> 

Hinweis: Stylesheets sollte (die AnchorPane ist die Wurzel in dem Beispiel) zu dem Wurzelknoten hinzugefügt werden.

Answer 2

Ich bin neu in JavaFX, aber ich habe meinem AnchorPane ein Hintergrundbild hinzugefügt, ohne irgendeine Codierung. Ziehen Sie das Bild einfach per Drag & Drop. Dafür wurde der Scene Builder entwickelt, nicht so? Ich denke, es ist das Beste seit geschnittenem Brot.

1) Ich habe mein Hintergrundbild mit Photoshop bearbeitet, um die gleiche Größe wie meine AnchorPane zu erhalten, 800 x 600 Pixel. Ich habe auch eine neue leere Datei in Photoshop in derselben Größe erstellt. Datei, Neu, Leere Datei. Dann kopierte ich mein Hintergrundbild und fügte es über die leere Datei ein, damit ich die Opazität 50% (Transparenz) einstellen konnte. Ich mag das, es macht mein Hintergrundbild "weich".

2) Ich habe mein Hintergrundbild mit 50% Opazität (50% transparent) in den Ordner src (source) meines NetBeans-Projekts kopiert. Der Ordner src ist ein gewöhnlicher Windows Explorer-Ordner.

3) Ziehen Sie das Hintergrund-JPG-Bild aus dem Ordner "src" in den Szenen-Generator als ImageView auf das AnchorPane-Symbol (Knoten), das sich im Dokument "Hierarchie" befindet. Linke Seite des Szenenbildners. Wenn das ImageView an einer anderen Stelle abgelegt wird, ziehen Sie es an die Stelle, an der es hingehört. Sie möchten es im AnchorPane, das ist der Hintergrund.

4) Wenn Ihr Hintergrundbild ImageView ausgewählt (hervorgehoben) ist, korrigieren Sie die Einstellungen auf der rechten Seite des Szenenbildners, Inspector, Layout: ImageView. Setzen Sie die Anchor Pane Constraints (das Spinnennetz-Ding) links und oben, beide auf 0. Und fixieren Sie die Größe, Fit Breite 800, Fit Höhe 600.

So einfach wie Kuchen. Es besteht keine Notwendigkeit für die Codierung, Scene Builder schreibt den Code automatisch für Sie. Es gibt auch keine Notwendigkeit für eine CSS-Datei. Was für ein Vergnügen, Sie können sehen, was Sie tun. Wysiwyg, was du siehst, ist was du bekommst.