Изменение размера ImageView на все доступное пространство

Question

Возможно, за последнюю неделю я просмотрел кучу разных ответов, и ни один из них, которые я нашел, не мог помочь.В настоящее время у меня есть свой странный «класс» для ImageView прямо здесь:

package com.grimlytwisted.programs.screens.editor;

import com.grimlytwisted.programs.Systats;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

import java.net.URL;
import java.util.ResourceBundle;

public class Editor implements Initializable {

    @FXML private ImageView imageDisplay;
    @FXML private Label nameOfImage;
    @FXML private Label sizeOfImage;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        this.setDefaultImage();
    }

    private void setDefaultImage() {

        System.out.println(Systats.getScreenHeight());
        imageDisplay.autosize();
        imageDisplay.setImage(new Image("images/dirt.jpg", imageDisplay.getFitWidth(), imageDisplay.getFitHeight(), true, false));
    }
}

... и, если это вообще помогает в моем файле FXML:

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

<?import javafx.geometry.Insets?>
<?import javafx.geometry.Rectangle2D?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>

<BorderPane fx:id="Editor" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.grimlytwisted.programs.screens.editor.Editor">
   <bottom>
      <HBox id="bottomContainer" stylesheets="@styles/coloring.css" BorderPane.alignment="CENTER">
         <children>
            <Label fx:id="nameOfImage" text="nameOfImage" />
            <Region HBox.hgrow="ALWAYS" />
            <Label fx:id="sizeOfImage" text="sizeOfImage" />
         </children>
         <opaqueInsets>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
         </opaqueInsets>
         <padding>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
         </padding>
      </HBox>
   </bottom>
   <top>
      <VBox BorderPane.alignment="CENTER">
         <children>
            <MenuBar>
              <menus>
                <Menu mnemonicParsing="false" text="File">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Close" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Edit">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Delete" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Help">
                  <items>
                    <MenuItem mnemonicParsing="false" text="About" />
                  </items>
                </Menu>
              </menus>
            </MenuBar>
         </children>
      </VBox>
   </top>
   <left>
      <TabPane prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE">
        <tabs>
          <Tab text="Untitled Tab 1">
            <content>
              <AnchorPane id="tabPane" fx:id="tabPane" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" stylesheets="@styles/coloring.css" />
            </content>
          </Tab>
          <Tab text="Untitled Tab 2">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </Tab>
        </tabs>
      </TabPane>
   </left>
   <center>
      <ImageView id="imageDisplay" fx:id="imageDisplay" cache="true" cacheHint="SPEED" depthTest="ENABLE" nodeOrientation="INHERIT" pickOnBounds="true" preserveRatio="true" smooth="false">
         <viewport>
            <Rectangle2D />
         </viewport>
      </ImageView>
   </center>
</BorderPane>

И, наконец, изображениеприводит к этому:

Таким образом, он перетекает в мое меню и мои области BottomContainer и, кажется, ограничен только шириной.Очевидно, у него нет границы для высоты, и мне нужно, чтобы он был только шириной / высотой, без «растяжения».

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

Answer 1

Оберните ImageView в Pane и свяжите его fitWidth / fitHeight свойства с размером этого Pane.Дополнительно сделайте ImageView неуправляемым и установите предпочтительный размер для Pane:

<center>
    <Pane fx:id="container" prefWidth="100" prefHeight="100">
        <children>
            <ImageView id="imageDisplay" fx:id="imageDisplay" cache="true" cacheHint="SPEED" depthTest="ENABLE" nodeOrientation="INHERIT" pickOnBounds="true" preserveRatio="true"
                       fitWidth="${container.width}" fitHeight="${container.height}"
                       smooth="false" managed="false"/>
        </children>
    <Pane>
</center>

private void setDefaultImage() {
    imageDisplay.setImage(new Image("images/dirt.jpg"));
}