JavaFX Image Skalierung in Scrollpane, Scrollpane resized sich nicht

[saschx]

Hallo zusammen,

ich habe bis jetzt eine relativ einfache JavaFX Anwendung in der ich ein Bild in eine ImageView lade die von einem Scrollpane umgeben ist. Weiterhin gibt es einen Slider mit dem ich das Bild skaliere.

Meine FXML Datei sieht folgendermaßen aus:

<AnchorPane id="AnchorPane" prefHeight="496.0" prefWidth="600.0" styleClass="mainFxmlClass" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.swt.smoebius.truckscanner.controller.MainSceneController">
  <children>
      <ScrollPane fx:id="picScrollPane" fitToHeight="true" fitToWidth="true" prefHeight="600.0" prefWidth="800.0" style="-fx-border-color: red;" AnchorPane.bottomAnchor="70.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <content>
            <ImageView fx:id="imageView" pickOnBounds="true" preserveRatio="true" scaleX="0.5" scaleY="0.5" />
         </content>
      </ScrollPane>
      <VBox prefHeight="45.0" prefWidth="180.0" spacing="2.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0">
         <children>
            <Label alignment="CENTER" contentDisplay="CENTER" prefHeight="17.0" prefWidth="142.0" text="Zoom" textAlignment="CENTER">
               <font>
                  <Font name="System Bold" size="12.0" />
               </font>
            </Label>
            <HBox prefHeight="100.0" prefWidth="200.0" spacing="10.0">
               <children>
                  <Slider fx:id="zoomSlider" blockIncrement="10" majorTickUnit="100.0" max="300" min="10" minorTickCount="50" snapToTicks="true" value="50" />
                  <Label fx:id="percentLabel" text="50%" />
               </children>
            </HBox>
         </children>
      </VBox>
      <HBox id="HBox" alignment="CENTER" layoutX="328.0" layoutY="10.0" prefHeight="46.0" prefWidth="262.0" spacing="15.0" AnchorPane.bottomAnchor="10.0" AnchorPane.rightAnchor="10.0">
         <children>
            <Button fx:id="retakePicButton1" mnemonicParsing="false" onAction="#retakePicture" text="Bild erneut aufnehmen" />
            <Button fx:id="saveButton1" mnemonicParsing="false" onAction="#savePicture" text="Bild Speichern" />
         </children>
      </HBox>
  </children>
</AnchorPane>

In meiner Controller Klasse habe ich nun einen Listener an den Slider gehangen der meine Bild ensprechend skaliert:

@Override
  public void initialize(URL url, ResourceBundle rb) {
    // TODO
   
    zoomSlider.valueProperty().addListener((observable, oldValue, newValue) -> {
      System.out.println("Slider Value Changed (newValue: " + newValue.intValue() + ")");
      percentLabel.setText(newValue.intValue()+"%");
      imageView.setScaleX(newValue.doubleValue()/100);
      imageView.setScaleY(newValue.doubleValue()/100);

    });
  }

Das Skalieren funktioniert auch so weit. Folgendes Verhalten gefällt mir aber nicht:
- da ich das Bild beim Start auf 50% skaliere, sich aber das Scrollpane auf 100% Bildgröße einrichtet, habe ich jetzt das Bild in der Mitte des Scollpanes mit entsprechend viel Rand außen herum.
- die Scrolleisten ändern Ihre Größe nur beim ändern der Fenstergröße, passen sich aber nicht an die Bildgröße an

Hat jemand einen Tipp wie ich das Scrollpane dazu bewegen kann seine Größe an das skallierte Bild anzupassen?

 

[saschx]

Hat denn hier niemand einen Tipp für mich?

 

[saschx]

So, habs jetzt selbst heraus bekommen, vielleicht ist es für den einen oder anderen hilfreich.
Schade nur das man in diesem Forum keinerlei Unterstützung erhält. Ging mir mir bei 2 Fragen schon das 2. mal so 🙁

@Override
  public void initialize(URL url, ResourceBundle rb) {
    // TODO
   
    zoomSlider.valueProperty().addListener((observable, oldValue, newValue) -> {
      System.out.println("Slider Value Changed (newValue: " + newValue.intValue() + ")");
      percentLabel.setText(newValue.intValue()+"%");
      //originale Bildgröße in Pixel
      int origImgWidth = (int)image.getWidth();
      int origImgHeigth = (int)image.getHeight();
      // Bild prozentual vergrößern/verkleinern (Slidervalue)
      imageView.setFitWidth(origImgWidth*newValue.doubleValue()/100);
      imageView.setFitHeight(origImgHeigth*newValue.doubleValue()/100);
      // Imageview neu aufbereiten
      imageView.setPreserveRatio(true);
      imageView.setSmooth(true);
      imageView.setCache(true);
      imageView.setImage(image);
      // Imageview wieder an Scrollpane binden
      picScrollPane.setContent(null);
      picScrollPane.setContent(imageView);
     
    });
  }

 

[Tom299]

Beim nächsten Mal vielleicht neben dem FXML auch mal den Controller-Code posten, dann würden sich bestimmt auch einige das Problem mal anschauen. Aber so ist das zu viel Aufwand und man hat auch nicht immer für alles Zeit oder die Kenntnisse

 

[Flown]

Das tut mir echt leid, dass dir hier nicht geholfen werden kann.
Anscheinend stellst du zu spezifische Fragen, die keiner auf die schnelle lösen kann/will.

Für das nächste Mal ist es sicher von Vorteil ein abgespecktes, lauffähiges Programm zu posten, damit sich potentielle Helfer auch reindenken können.

Auf jeden Fall wird dein Beitrag gelesen.

 

[saschx]

Mein Controller hatte bis dato genau den Code den ich in meinem ersten Post gepostet hatte.
Wenn sich wenigstens jemand geregt hätte und gesagt das er noch weitere Infos brauch, dann hätte ich die auch zur Verfügung gestellt. Nur leider kam ja gar keine Reaktion.
Na hoffentlich kann eventuell jemand mit meinem Lösungsweg was anfangen...