JavaFX ImageView 适合容器答案

【问题标题】：JavaFX ImageView fits containerJavaFX ImageView 适合容器
【发布时间】：2018-07-26 00:50:51
【问题描述】：

我试图在 AnchorPane 中安装 ImageView，ImageView 是从数据库中获取的，所以没有 CSS，我尝试将 ImageView 的宽度和高度与 AnchorPane 的宽度和高度绑定，但我明白了结果：

这是我的 fxml：

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
       <AnchorPane style="-fx-background-color: grey;" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
           <children>
               <Label fx:id="nombrePlato" alignment="CENTER" contentDisplay="CENTER" maxHeight="50.0" prefHeight="50.0" text="Nombre del Plato" textAlignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                   <font>
                       <Font size="30.0" />
                   </font>
               </Label>
           </children>
       </AnchorPane>
       <AnchorPane fx:id="anchorPane" layoutY="300.0" styleClass="anchorPane" stylesheets="@../../../../core/resources/css/MainCSS.css" AnchorPane.bottomAnchor="5.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="50.0">
         <children>
            <ImageView fx:id="imagenPlato" fitHeight="100.0" fitWidth="100.0" pickOnBounds="true" preserveRatio="true" />
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

这是我的方法：

public void rellenar(Label nombrePlato, ImageView imagenPlato, Plato plato, AnchorPane anchorPane) throws SQLException {

        nombrePlato.setText(plato.getNombre());
        Blob blob = plato.getRutaImagen();
        int blobLength = (int) blob.length();
        byte[] blobAsBytes = blob.getBytes(1, blobLength);
        Image convertToJavaFXImage = convertToJavaFXImage(blobAsBytes, 1024, 768);
        imagenPlato.setImage(convertToJavaFXImage);

        imagenPlato.fitWidthProperty().bind(anchorPane.widthProperty());
        imagenPlato.fitHeightProperty().bind(anchorPane.heightProperty());
    }

知道如何使它适合他的 anchorPane 并使其响应吗？

【问题讨论】：

标签： java javafx imageview pane

【解决方案1】：

作为 ImageView 的替代方案，您可以在区域（例如 AnchorPane）上使用 CSS -fx-background-image attribute。 CSS -fx-background-size 选项将为您提供各种尺寸选择，例如覆盖或包含：

包含

缩放图像，同时保留其固有纵横比（如果有），到最大尺寸，使其宽度和高度都能适合背景定位区域内。

封面

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

【讨论】：

【解决方案2】：

您的问题很可能在于以下行：

<ImageView fx:id="imagenPlato" fitHeight="100.0" fitWidth="100.0" pickOnBounds="true" preserveRatio="true" />

具体来说，您已经设置：

preserveRatio="true"

...这将尝试保持纵横比相同，因此图像不会填满容器。请将其设置为 false，然后您就可以开始了。

【讨论】：

问题在于图像的高度大于宽度，如果我将其设置为 false，它们就会变得模糊。
@Green_Sam 我不确定我是否理解您要执行的操作 - 您必须选择是希望图像保持其纵横比还是填充容器。你不能两者兼得！

【解决方案3】：

从https://bugs.openjdk.java.net/browse/JDK-8091789获取ImageViewPane

然后像这样包装你的图像视图：

<ImageViewPane fx:id="imageViewPane">
    <imageView>
        <ImageView fx:id="imageView"
                   pickOnBounds="true"
                   preserveRatio="true">
        </ImageView>
    </imageView>
</ImageViewPane>

【讨论】：