Search code examples
javajavafxfxmlimage-resizing

Resizing ImageView to all available space

I've looked at a bunch of different answers over the past week maybe, and none of them I found could help. Currently I have my weird "class" for the ImageView right here:

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

...and if it helps at all my FXML file:

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

And finally, the image leads to this: Image Overflow

So it's overflowing into my Menu and my BottomContainer areas, and seems to only be confined width-wise. It has no boundary for height apparently, and I need it to only be as large as the width / height, without "stretching."

I currently want to preserve the pixel ratio, and just scale the image as much as I can before it reaches the maximum.

Solution

  • Wrap the ImageView in a Pane and bind it's fitWidth/fitHeight properties to the size of this Pane. Additionally make the ImageView unmanaged and set the preferred size for the 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"));
}