java - 将 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>

最后，这张图片是这样的:

所以它溢出到我的 Menu 和 BottomContainer 区域，并且似乎只在宽度方向上受限。它显然没有高度边界，我需要它只与宽度/高度一样大，没有“拉伸(stretch)”。

我目前想保留像素比，并在图像达到最大值之前尽可能多地缩放图像。

Answer 1

包装ImageView在Pane并绑定(bind)它的 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"));
}