图像大小调整，保留比例为全场景答案

【问题标题】：Image resizing with preserve ratio to full scene图像大小调整，保留比例为全场景
【发布时间】：2019-04-03 07:18:49
【问题描述】：

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

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

我现在遇到的问题是，由于保留的比例，如果无法保留比例，我的图像将不再调整为完整场景。

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

提前感谢您的帮助！

【问题讨论】：

不要使用ImageView，而是将一些Region（可能是场景的根）的背景设置为您的图像。然后将其大小设置为"cover"。您可以在代码或 CSS 中执行此操作。
1.请定义所需的行为：您要保持图像纵横比还是将其拉伸以适合场景？这些可能相互矛盾。 2. 发帖minimal reproducible example
@c0der 正如我已经在我的问题中所说的那样，应该保留纵横比并且不拉伸。
抱歉打扰您了。我不会再这样做了。
您确实错过了@c0der 评论中的第二句话：按照参考帮助页面上的建议进行操作..

标签： java javafx java-8

【解决方案1】：

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

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

我建议您将Region 的the background 设置为您的图像，而不是使用ImageView。然后，您可以将背景图像的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】：

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

imageBackground.setPreserveRatio(true);

来自文档：

指示在缩放以适应拟合边界框内的图像时是否保留源图像的纵横比。

如果设置为true，它会通过以下方式影响这个ImageView的尺寸

如果只设置了 fitWidth，则会缩放高度以保持比例

如果只设置了 fitHeight，则会缩放宽度以保持比例

如果两者都设置了，则它们都可以进行缩放，以在保持原始纵横比的同时获得最佳的宽高比矩形

如果未设置或设置为 false，它会通过以下方式影响此 ImageView 的尺寸

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

如果只设置了fitHeight，图片的视图高度会缩放以匹配，高度不变；

如果两者都设置了，图像视图会缩放以匹配两者。

【讨论】：