在Java应用程序中将背景图像设置为与窗口/屏幕大小相同

Question

我希望设置一张与我的窗口/屏幕大小相同的背景图片。

我倾向于在我的CSS文件中完成这个操作，但是我没有找到实现这个目标的方法。

我必须在javafx类文件中完成吗？

感谢您的帮助 ;)

- Chris

Answer 1

如JavaFX窗口大小代码演示所示，您需要在Java代码中确定屏幕大小，无法在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;
}

- ItachiUchiha

Answer 2

好问题...

• 首先，我认为你在问题中指的是“应用程序窗口的大小”。显然，如果你的应用程序窗口比背景图像小，那么你就不能有一个比屏幕更大的背景图像。

• 其次，这里有一段来自JavaFX CSS参考指南的代码片段：

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

  "...背景和边框机制是基于CSS 3草案背景和边框模块的。详细描述请参见[4]。"

     ...
  

  [4] CSS Backgrounds and Borders Module Level 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-size项应用于相应的图像。

  • 你可以在http://www.w3.org/TR/css3-background/#the-background-image上获得更多细节。

- Flak DiNenno