Question

我当前正在编写一个程序，该程序中我想有一个背景图像，当调整场景大小时，该图像也会以保留的比例进行调整。我正在使用Java 8的SceneBuilder构建fxml，并且已经将图像属性绑定到我的AnchorPane属性，如下所示：

imageBackground.fitHeightProperty().bind(anchorPaneBackground.heightProperty());
imageBackground.fitWidthProperty().bind(anchorPaneBackground.widthProperty());

我现在遇到的问题是，由于保留了比例，如果无法保留该比例，我的图像将无法再缩放到整个场景。

如何“放大”图像，以使图像始终显示在整个场景中？我必须使用某种监听器还是忽略某些内容？

感谢您的任何帮助！

Answer 1

要保留比例，您可以使用ImageView.setPreserveRatio()来防止图像拉伸：

imageBackground.setPreserveRatio(true);

从文档中

指示在缩放以使图像适合拟合边界框时是否保留源图像的宽高比。

如果设置为true，它将以以下方式影响此ImageView的尺寸


如果仅设置fitWidth，则缩放高度以保留比例

如果仅设置fitHeight，则缩放宽度以保留比率

如果同时设置了两者，则可以在保持原始长宽比的同时缩放它们，以在高度与宽度的矩形中获得最佳的匹配度。


如果未设置或将其设置为false，则会以以下方式影响此ImageView的尺寸


如果仅设置fitWidth，则图像的视图宽度将缩放以匹配并且高度不变；

如果仅设置fitHeight，则图像的视图高度将缩放以匹配并且高度不变；

如果同时设置了两者，则图像视图将缩放以匹配两者。

Answer 2

如果我对您的理解正确，那么您的目标是：

保留图像的长宽比。
用图像覆盖整个区域（即任何一侧都没有间隙）。

建议您将ImageView中的the background设置为图片，而不要使用Region。然后，您可以将背景图片的the size设置为cover，这将：

[...]将图像缩放，同时保留其固有的宽高比（如果有），以最小的尺寸，以使其宽度和高度都可以完全覆盖背景定位区域。

可以通过CSS或FXML以编程方式设置背景。

在Java中：

Image image = ...;
BackgroundImage bgImage = new BackgroundImage(
        image,                                                 // image
        BackgroundRepeat.NO_REPEAT,                            // repeatX
        BackgroundRepeat.NO_REPEAT,                            // repeatY
        BackgroundPosition.CENTER,                             // position
        new BackgroundSize(-1, -1, false, false, false, true)  // size
);
anchorPaneBackground.setBackground(new Background(bgImage));

在CSS中（请参见JavaFX CSS Reference Guide）：

/* Or whatever ID/style class you give the target region */
#achorPaneBackground {
    -fx-background-image: url("your/image/path");
    -fx-background-size: cover;
    -fx-background-position: center;
    -fx-background-repeat: no-repeat;
}

在FXML中（不能保证这样做尽可能简洁）：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Background?>
<?import javafx.scene.layout.BackgroundImage?>
<?import javafx.scene.layout.BackgroundPosition?>
<?import javafx.scene.layout.BackgroundSize?>

<AnchorPane xmlns="http://javafx.com/javafx/12" xmlns:fx="http://javafx.com/fxml/1">

    <background>
        <Background>
            <images>
                <BackgroundImage repeatX="NO_REPEAT" repeatY="NO_REPEAT">
                    <image>
                        <Image url="your/image/path"/>
                    </image>
                    <position>
                        <BackgroundPosition fx:constant="CENTER"/>
                    </position>
                    <size>
                        <BackgroundSize cover="true"/>
                    </size>
                </BackgroundImage>
            </images>
        </Background>
    </background>

</AnchorPane>

注意：我不相信您可以在Scene Builder中设置Region的背景（通过添加样式表除外）。如果我错了，请纠正我。

调整图像大小，并保留整个场景

2 个答案: