JavaFX - Passen Sie die Größe von ImageView an andere Knoten an

Ein Memo, als ich mich bemühte, einen solchen Wunsch zu erfüllen, die Anzeige von "ImageView" zu vergrößern oder zu verkleinern, wenn die Fenstergröße geändert wurde. Da es das Ergebnis verschiedener Versuche und Irrtümer ist, kann die Richtigkeit nicht garantiert werden.

Wenn mit Stage verbunden

Implementierung

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

** Ausführungsergebnis **

Erläuterung

--Binden Sie die Eigenschaften "fitWidth" und "fitHeight" von "ImageView" an die Eigenschaften "width" und "height" von "Stage" --Beachten Sie, dass Sie die Werte für "Breite" und "Höhe" von "Bühne" im Voraus festlegen müssen.

• Wenn nichts eingestellt ist, sind die Anfangswerte von "Breite" und "Höhe" von "Bühne" "NaN".
• Wenn Sie die Eigenschaft "fitWidth", "fitHeight" von "ImageView" an die Eigenschaft "width", "height" binden, wird sie anscheinend mit der Originalgröße des Satzes "Image" initialisiert. ―― Wenn Sie jedoch genau hinschauen, wird der untere Teil des Bildes ausgeblendet, wenn Sie die Fenstergröße verringern (es ist leicht zu verstehen, wenn Sie die Figur der Frau unten rechts betrachten).

height | Window (JavaFX 8)

Dieser Wert enthält ** alle Dekorationen wie die Titelleiste, die vom Betriebssystem hinzugefügt werden können **.

――So scheint das Bild wahrscheinlich durch die Höhe der Titelleiste verborgen zu sein.

Passen Sie die Route des Szenendiagramms an

Implementierung

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

** Ausführungsergebnis **

Erläuterung

--Binden Sie die Eigenschaft "width", "height" von "BorderPane", die die Wurzel des Szenendiagramms darstellt, und die Eigenschaft "fitWidth", "fitHeight" von "ImageView".

• Dies scheint auch die Originalgröße von "Bild" zu sein, es sei denn, Sie legen die Anfangswerte für "Breite" und "Höhe" von "Bühne" fest. ――Selbst wenn Sie die Fenstergröße reduzieren, wird der untere Rand des Bildes nicht ausgeblendet und es scheint gut zu funktionieren

Verknüpfung mit anderen Knoten als der Wurzel

Wenn ein anderer Knoten hereinkommt

Das obige Verfahren kann nur als sogenannter Bildbetrachter realisiert werden, da das Szenendiagramm keine anderen Knoten enthält. Fügen Sie als Test einen weiteren Knoten in das Szenendiagramm ein.

Implementierung

** Ausführungsergebnis **

Erläuterung

• Da der Bereich nur für die Größe des Etiketts verwendet wird, ist der Bereich für die Anzeige des Bildes nicht ausreichend, wenn die Größe des Stammknotens und die Größe von "ImageView" verknüpft sind.

Versuchen Sie vorerst, einen Knoten für den Bildanzeigebereich hinzuzufügen

Implementierung

• Ein neuer Knoten (BorderPane) wurde hinzugefügt, um ImageView zu umgeben
• Die Beziehungen "Breite" und "Höhe" werden vorerst alle auf den Standardwert "USE_COMPUTED_SIZE" gesetzt. --ImageView sollte so implementiert werden, dass es mit den Eigenschaften width und height dieses neu hinzugefügten BorderPane funktioniert.

** Ausführungsergebnis **

Erläuterung

――Es ist etwas verwirrend, aber das Bild wird in der Originalgröße angezeigt und nur der obere linke Teil ist sichtbar. ――Ich verstehe das Prinzip nicht wirklich, warum "BorderPane" in Ordnung ist, wenn es sich um den Stammknoten handelt, und es funktioniert so, wenn es sich um einen untergeordneten Knoten handelt.

Verknüpfung mit Nicht-Root-Knoten

Implementierung

** Ausführungsergebnis **

Erläuterung

--Stellen Sie "Min Width" und "Min Height" auf "0"

• Wenn Sie den Standardwert auf "USE_COMPUTED_SIZE" setzen, entspricht die Mindestgröße des Bereichs wahrscheinlich der Größe des untergeordneten Elements (hier die Größe von "ImageView"), sodass die Mindestgröße = die Größe des Bildes 1 Ich stelle mir vor, dass die Bewegung genau wie die vorherige war (stellen Sie sich vor) ――Jedoch sollten die Bedingungen jedoch dieselben sein, wenn BorderPane der Stammknoten ist, daher bin ich mir nicht sicher, warum es dort nicht passiert ist.
• Wenn Sie die Größe vorerst mit dem Nicht-Root-Knoten verknüpfen möchten, setzen Sie "Min Width", "Min Height" auf einen anderen Wert als "USE_COMPUTED_SIZE", "USE_PREF_SIZE", und es wird gut aussehen.

Zusammenfassung

--Verbreitet --Stellen Sie "Breite" und "Höhe" von "Bühne" ein --Binden Sie die Eigenschaften fitWidth, fitHeight von ImageView an die Eigenschaften width, height des Knotens, mit dem Sie arbeiten möchten. --Wenn der zu verknüpfende Knoten nicht der Stammknoten ist --Stellen Sie die "Min Width", "Min Height" des Knotens auf einen anderen Wert als "USE_COMPUTED_SIZE", "USE_PREF_SIZSE" ein