JavaFX ImageView fits container

问题

I'm trying to fit an ImageView in an AnchorPane, the ImageView is obtained from a database, so no CSS, I tried binding the width and height of the ImageView withe the width and height of the AnchorPane, but I get this result:

Here's my 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>

And here's my method:

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());
    }

Any idea how to make it fit he anchorPane and make it responsive?

回答1:

Your problem most likely lies in the following line:

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

Specifically, you've set:

preserveRatio="true"

...which will try to keep the aspect ratio the same, so the image won't fill the container. Set it to false instead, and you should be good to go.

回答2:

As an alternative to an ImageView, you could use a CSS -fx-background-image attribute on a Region (such as your AnchorPane). The CSS -fx-background-size option will provide you with various sizing alternatives such as cover or contain:

contain

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

cover

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

来源：https://stackoverflow.com/questions/48804283/javafx-imageview-fits-container

标签

java

javafx

imageview

pane