JavaFX --Match la taille d'ImageView avec d'autres nœuds

Un mémo quand j'ai eu du mal à répondre à un tel désir de rendre l'affichage de ʻImageView` plus grand ou plus petit lorsque la taille de la fenêtre a été modifiée. Puisqu'il est le résultat de divers essais et erreurs, l'exactitude ne peut être garantie.

Lorsqu'il est lié à Stage

La mise en oeuvre

main.fxml

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

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane fx:controller="sample.javafx.MainController" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1">
   <center>
      <ImageView fx:id="imageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER" />
   </center>
</BorderPane>

MainController.java

package sample.javafx;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

import java.net.URL;
import java.nio.file.Paths;
import java.util.ResourceBundle;

public class MainController implements Initializable {
    @FXML
    private ImageView imageView;

    public void initStage(Stage stage) {
        stage.setWidth(300);
        stage.setHeight(200);
        
        imageView.fitWidthProperty().bind(stage.widthProperty());
        imageView.fitHeightProperty().bind(stage.heightProperty());
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        Image image = new Image(Paths.get("./image/shirakawago.jpg ").toUri().toString());
        imageView.setImage(image);
    }
}

Main.java

package sample.javafx;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
    public static void main(String[] args) {
        Application.launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) throws Exception {
        FXMLLoader loader = new FXMLLoader(this.getClass().getResource("/main.fxml"));

        Parent root = loader.load();

        MainController controller = loader.getController();
        controller.initStage(primaryStage);

        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

** Résultat d'exécution **

La description

• Liez les propriétés fitWidth et fitHeight de ʻImageView aux propriétés width et height de Stage`
• Notez que vous devez définir à l'avance les valeurs de «largeur» et de «hauteur» de «Stage». --Si rien n'est défini, les valeurs initiales de width et height de Stage seront NaN.
• Si vous liez la propriété fitWidth, fitHeight de ʻImageView à la propriété width, height, il semble qu'elle sera initialisée avec la taille originale de l'ensemble ʻImage. ――Cependant, si vous regardez de près, la partie inférieure de l'image est masquée lorsque vous réduisez la taille de la fenêtre (c'est facile à comprendre si vous regardez la figure de la femme en bas à droite)

height | Window (JavaFX 8)

Cette valeur inclut ** toutes les décorations telles que la barre de titre qui peuvent être ajoutées par le système d'exploitation **.

――Il semble donc que l'image soit probablement masquée par la hauteur de la barre de titre.

Faire correspondre l'itinéraire du graphique de la scène

La mise en oeuvre

MainController.java

package sample.javafx;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.net.URL;
import java.nio.file.Paths;
import java.util.ResourceBundle;

public class MainController implements Initializable {
    @FXML
    private BorderPane borderPane;
    @FXML
    private ImageView imageView;
    
    public void initStage(Stage stage) {
        stage.setWidth(300);
        stage.setHeight(200);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        Image image = new Image(Paths.get("./image/shirakawago.jpg ").toUri().toString());
        imageView.setImage(image);
        
        imageView.fitWidthProperty().bind(borderPane.widthProperty());
        imageView.fitHeightProperty().bind(borderPane.heightProperty());
    }
}

** Résultat d'exécution **

La description

• Liez la propriété width, height de BorderPane, qui est la racine du graphique de la scène, et la propriété fitWidth, fitHeight de ʻImageView`.
• De plus, si vous ne définissez pas les valeurs initiales de width et height de Stage, il semble que ce sera la taille d'origine de ʻImage`. ――Même si vous réduisez la taille de la fenêtre, le bas de l'image n'est pas caché et il semble bien fonctionner

Lien avec des nœuds autres que la racine

Lorsqu'un autre nœud entre

La méthode ci-dessus ne peut être réalisée qu'en tant que visionneuse d'images, car il n'y a pas d'autres nœuds dans le graphe de scène. À titre de test, ajoutez un autre nœud dans le graphique de la scène.

La mise en oeuvre

** Résultat d'exécution **

La description

• Puisque la zone n'est utilisée que pour la taille de l'étiquette, si la taille du nœud racine et la taille de ʻImageView` sont liées, la plage d'affichage de l'image sera insuffisante.

Pour le moment, essayez d'ajouter un nœud pour la zone d'affichage de l'image

La mise en oeuvre

• Ajout d'un nouveau nœud (BorderPane) pour entourer ʻImageView`
• Les relations «largeur» et «hauteur» sont toutes définies sur la valeur par défaut «USE_COMPUTED_SIZE »pour le moment. --ʻImageView` doit être implémenté pour qu'il fonctionne avec les propriétés "width" et "height" de ce nouveau "BorderPane".

** Résultat d'exécution **

La description

――C'est un peu difficile à comprendre, mais l'image est affichée dans sa taille d'origine et seule la partie supérieure gauche est visible. ――Je ne comprends pas vraiment le principe pourquoi BorderPane est OK quand c'est le nœud racine et cela fonctionne comme ça quand c'est un nœud enfant.

Lien avec un nœud non racine

La mise en oeuvre

** Résultat d'exécution **

La description

• Réglez respectivement Min Width et Min Height sur 0
• Probablement, si vous définissez la valeur par défaut ʻUSE_COMPUTED_SIZE, la taille minimale de la zone correspondra à la taille de l'élément enfant (ici, la taille de ʻImageView), donc la taille minimale = la taille de l'image, 1 J'imagine que le mouvement était comme le précédent (imaginez juste) ――Cependant, si c'est le cas, les conditions doivent être les mêmes lorsque BorderPane est le nœud racine, donc je ne sais pas pourquoi cela ne s'est pas produit là-bas. --Pour le moment, si vous voulez lier la taille avec le nœud non racine, cela semble être bon si vous définissez Min Width, Min Height sur une valeur autre que ʻUSE_COMPUTED_SIZE, ʻUSE_PREF_SIZE.

Résumé

--Commun --Définissez la «largeur» et la «hauteur» de la «scène»

• Liez les propriétés fitWidth, fitHeight de ʻImageView aux propriétés width, heightdu nœud avec lequel vous voulez travailler. --Lorsque le nœud à lier n'est pas le nœud racine --Définissez laMin Width, Min Height du nœud sur une valeur autre que ʻUSE_COMPUTED_SIZE, ʻUSE_PREF_SIZSE`