在 JavaFX 中新增背景影象
本教程介紹如何在 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 設定背景。