將背景圖像設置為與Java應用程序中的窗口/屏幕相同的大小

Question

我想設置一個與我的窗口/屏幕大小相同的背景圖像。

我更喜歡在我的CSS文件中執行此操作，但我找不到實現此目的的方法。

我必須在javafx類文件中執行此操作嗎？

謝謝你的每一個幫助;）

Answer 1

您必須在Java代碼中確定屏幕大小，如JavaFX窗口大小中所示 ，無法在CSS中確定它。

對於圖像，在您的Java代碼中，您可以使用某些內容

ImageView imageView = new ImageView(image);
imageView.setFitWidth(Screen.getPrimary().getVisualBounds().getWidth());
imageView.setFitHeight(Screen.getPrimary().getVisualBounds().getHeight());

如果要將背景圖像設置為場景，則：

import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.*;

public class ScreenSizeImage extends Application {
    @Override public void start(final Stage stage) {
        // uncomment if you want the stage full screen.
        //stage.setFullScreen(true);

        Screen screen = Screen.getPrimary();
        Rectangle2D bounds = screen.getVisualBounds();

        stage.setX(bounds.getMinX());
        stage.setY(bounds.getMinY());
        stage.setWidth(bounds.getWidth());
        stage.setHeight(bounds.getHeight());

        StackPane root = new StackPane();
        root.setStyle(
            "-fx-background-image: url(" +
                "'http://icons.iconarchive.com/icons/iconka/meow/256/cat-box-icon.png'" +
            "); " +
            "-fx-background-size: cover;"
        );
        stage.setScene(new Scene(root));
        stage.show();
    }

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

當然，除了內聯的setStyle調用之外，最好使用下面的單獨的CSS樣式表：

.root{
    -fx-background-image: url("background_image.jpg");
    -fx-background-size: cover;
}

Answer 2

好問題...

• 首先，我認為你的意思是“你的應用程序窗口的大小”。 顯然，如果應用程序窗口較小，則不能有比屏幕大的背景圖像。

• 其次，這是JavaFX CSS參考指南的一個片段：

  http://download.java.net/jdk9/jfxdocs/javafx/scene/doc-files/cssref.html

  “......背景和邊界機制是在CSS 3草案背景和邊界模塊之后形成的。詳見[4]。 ”

    ... 

  [4] CSS背景和邊界模塊第3級： http ： //www.w3.org/TR/css3-background/

  ---

  • 只要寬高比正確/您的尺寸成比例，您就可以將JavaFX 供應商特定的 CSS屬性-fx-background-size與stretch值一起使用。

  • 您也可以通過嘗試將一個維度的auto和另一個維度的100%組合來實現它...以及contain ...的某種組合，具體取決於您是否可以使用裁剪圖像 。

  • -fx-background-size <bg-size> [ , <bg-size> ]*

    <bg-size> = [ <size> | auto ]{1,2} | cover | contain | stretch

    由逗號分隔的一系列值。 系列中的每個bg大小的項目都適用於背景圖像系列中的相應圖像。

  • 您可以在http://www.w3.org/TR/css3-background/#the-background-image獲取更多詳細 信息