Question

我试图在一个AnchorPane中安装一个ImageView，ImageView是从数据库中获取的，所以没有CSS，我尝试使用AnchorPane的宽度和高度来绑定ImageView的宽度和高度，但是我得到这个结果：

这是我的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并使其响应？

Answer 1

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

包含

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

盖

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

Answer 2

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

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

具体来说，你设置了：

preserveRatio="true"

...将尝试保持纵横比相同，因此图像不会填充容器。将其设置为false，你应该好好去。

Answer 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>

JavaFX ImageView适合容器

3 个答案: