Изменение размера изображения с сохранением соотношения к полной сцене

Question

В настоящее время я пишу программу, в которой я хочу иметь фоновое изображение, размер которого изменяется с сохраненным соотношением, когда размер сцены также изменяется.Я использую SceneBuilder для Java 8 для создания fxml, и я уже связал свойства изображения со своими свойствами AnchorPane следующим образом:

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

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что из-за сохраненияСоотношение мое изображение больше не будет изменяться до полной сцены, если соотношение не может быть сохранено.

Как я могу "увеличить" изображение, чтобы оно всегда отображалось на полной сцене?Должен ли я использовать какой-либо слушатель или я что-то пропускаю?

Спасибо за любую помощь заранее!

Answer 1

Если я вас правильно понимаю, ваши цели:

1. Сохранить соотношение сторон изображения.
2. Покройте всю область изображением (то есть без пробелов с любой стороны).

Вместо использования ImageView я рекомендую установить фон вашего Region в качестве вашего изображения. Затем вы можете установить размер фонового изображения на 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 ):

/* 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>

Примечание: я не верю, что вы можете установить фон Region в Scene Builder (кроме как путем добавления таблицы стилей). Пожалуйста, поправьте меня, если я ошибаюсь.

Answer 2

Для сохранения соотношения вы можете использовать ImageView.setPreserveRatio() для предотвращения растяжения изображения:

imageBackground.setPreserveRatio(true);

Из документов:

Указывает, следует ли сохранять пропорции исходного изображения при масштабировании для подгонки изображения под ограничивающий прямоугольник.

Если установлено значение true, это влияет на размеры этого ImageView следующим образом

• Если установлена ​​только fitWidth, высота масштабируется для сохранения соотношения
• Если задан только fitHeight, ширина масштабируется для сохранения соотношения
• Если оба установлены, они оба могут быть масштабированы для наилучшего соответствия по ширине и высоте прямоугольника при сохранении исходного соотношения сторон

Если не установлено или установлено значение false, это влияет на размеры этого ImageView следующим образом

• Если установлена ​​только fitWidth, ширина просмотра изображения масштабируется для соответствия, а высота не изменяется;
• Если задан только fitHeight, высота просмотра изображения масштабируется в соответствии, а высота не изменяется;
• Если установлены оба параметра, вид изображения масштабируется для соответствия обоим.