JavaFX Scrollpane elementweise scrollen

W

Woggle

Mitglied
Hallo,

ich stehe aktuell vor einem JavaFX Problem, das ich nicht gelöst bekomme und suche deshalb hier nach Unterstützung.

Ich habe eine Scrollpane, in der mehrere Borderpanes befinden. In diesen Borderpanes werden Thumbnails von Bildern angezeigt. Klickt man auf ein Thumbnail, so erscheint das Bild in einer großen Imageview rechts neben der Scrollpane.

Nun soll man nicht nur per Mausklick auf das Thumbnail das Bild sehen können, sondern auch durch Buttons oder dem Drücken der Pfeiltasten. Wenn auf den "nächstes Bild"-Button gedrückt wird, wird das nächste Thumbnail "ausgewählt" (Es wird ein Rahmen darum gezeichnet) und erscheint in groß auf dem großen Imageview. Ist man mit der Auswahl am untersten Rand der Scrollpane angekommen sollte die Scrollpane so weit nach unten scrollen, dass am unteren rand des Viewports das ausgewählte Thumbnail zu sehen ist und entsprechend analog, wenn man nach oben geht.
Das Verhalten soll exakt dasselbe wie beim Adobe Reader sein, wenn man ein mehrseitiges PDF anschaut:
prinzip.jpg

Dies möchte ich so auch gerne in meinem Programm haben, kämpfe allerdings mit dem Scrollen.
Die Scrolllogik sollte in zoomToActualThumbnail() passieren, allerdings komme ich nicht dahinter. So wie ich es aktuell hab mit HIlfe von JavaFX ScrollPane programmatically moving the viewport - centering content scrollt es immer nur teilweise und in einem "Bogen". Das unterste Thumbnail ist nie vollständig zu sehen.
Java: 
    private void zoomToActualThumbnail() {
        //Set Selection Border
        this.setBorderForActualThumbnail();

        double height = this.sp_thumbnailScrollPane.getContent().getBoundsInLocal().getHeight();
        double y = this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail).getBoundsInParent().getMinY();
        this.sp_thumbnailScrollPane.setVvalue(this.sp_thumbnailScrollPane.getVmax() *  (y / height));
    }




SSCCE:

view.fxml (Hier müssten entsprechend die Bilder in den Zeilen 24, 33, 42, 53 und 60 ausgetauscht werden oder ein Bild mit dem namen "Aufkleber_Trollface.jpg" im src Ordner gespeichert werden)
Java: 
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.*?>
<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-background-color: transparent;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Main">
   <children>
      <HBox maxHeight="1.7976931348623157E308" spacing="15.0" style="-fx-background-color: transparent;" VBox.vgrow="ALWAYS">
         <children>
            <VBox alignment="TOP_CENTER" fillWidth="false">
               <children>
                  <ScrollPane fx:id="sp_thumbnailScrollPane" fitToWidth="true" hbarPolicy="NEVER" prefViewportHeight="383.0" prefViewportWidth="100.0" prefWidth="110.0" style="-fx-background-color: transparent;" styleClass="thumbnail-band" VBox.vgrow="ALWAYS">
                     <content>
                        <VBox fx:id="vbox_thumbnailVBox" maxHeight="1.7976931348623157E308" prefWidth="100.0" spacing="10.0" style="-fx-background-color: transparent;" styleClass="thumbnail-band">
                           <children>
                              <BorderPane layoutX="10.0" layoutY="10.0" maxWidth="100.0" prefHeight="150.0" prefWidth="59.0">
                                 <center>
                                    <ImageView fitHeight="150.0" fitWidth="100.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER">
                                       <image>
                                          <Image url="@Aufkleber_Trollface.jpg" />
                                       </image>
                                    </ImageView>
                                 </center>
                              </BorderPane>
                              <BorderPane layoutX="10.0" layoutY="10.0" maxWidth="100.0" prefHeight="150.0" prefWidth="59.0">
                                 <center>
                                    <ImageView fitHeight="150.0" fitWidth="100.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER">
                                       <image>
                                          <Image url="@Aufkleber_Trollface.jpg" />
                                       </image>
                                    </ImageView>
                                 </center>
                              </BorderPane>
                              <BorderPane layoutX="10.0" layoutY="170.0" maxWidth="100.0" prefHeight="150.0" prefWidth="59.0">
                                 <center>
                                    <ImageView fitHeight="150.0" fitWidth="100.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER">
                                       <image>
                                          <Image url="@Aufkleber_Trollface.jpg" />
                                       </image>
                                    </ImageView>
                                 </center>
                              </BorderPane>
                              <BorderPane layoutX="10.0" layoutY="330.0" maxWidth="100.0" prefHeight="150.0" prefWidth="59.0">
                                 <center>
                                    <ImageView fitHeight="150.0" fitWidth="100.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER">
                                       <image>
                                          <Image url="@Aufkleber_Trollface.jpg" />
                                       </image>
                                    </ImageView>
                                 </center>
                              </BorderPane>
                              <BorderPane layoutX="10.0" layoutY="490.0" maxWidth="100.0" prefHeight="150.0" prefWidth="59.0">
                                 <center>
                                    <ImageView fitHeight="150.0" fitWidth="100.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER">
                                       <image>
                                          <Image url="@Aufkleber_Trollface.jpg" />
                                       </image>
                                    </ImageView>
                                 </center>
                              </BorderPane>
                           </children></VBox>
                     </content>
                     <VBox.margin>
                        <Insets />
                     </VBox.margin>
                  </ScrollPane>
                  <VBox alignment="TOP_CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="NEVER">
                     <children>
                        <HBox alignment="BOTTOM_CENTER" spacing="5.0">
                           <children>
                              <Button mnemonicParsing="false" onAction="#goFirstPressed" text="&lt;|" />
                              <Button layoutX="10.0" layoutY="10.0" mnemonicParsing="false" onAction="#previousPressed" text="&lt;" />
                              <Button layoutX="43.0" layoutY="10.0" mnemonicParsing="false" onAction="#nextPressed" text="&gt;" />
                              <Button layoutX="76.0" layoutY="10.0" mnemonicParsing="false" onAction="#goLastPressed" text="|&gt;" />
                           </children>
                        </HBox>
                     </children>
                     <VBox.margin>
                        <Insets bottom="15.0" top="16.0" />
                     </VBox.margin>
                  </VBox>
               </children>
            </VBox>
            <VBox maxHeight="1.7976931348623157E308" HBox.hgrow="NEVER">
               <children>
                  <HBox fx:id="hbox_ivParent" maxHeight="1.7976931348623157E308" VBox.vgrow="ALWAYS">
                     <children>
                        <ScrollPane fx:id="scrollpane_imageviewScrollpane" fitToHeight="true" hbarPolicy="NEVER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" pannable="true" prefViewportHeight="381.4000015258789" prefViewportWidth="270.0"  styleClass="scan-scrollpane" vbarPolicy="NEVER" HBox.hgrow="NEVER">
                           <content>
                              <ImageView fx:id="iv_imageview" fitHeight="382.0" fitWidth="270.0" pickOnBounds="true" preserveRatio="true" styleClass="scan-imageview">
                                 <viewport>
                                    <Rectangle2D />
                                 </viewport>
                              </ImageView>
                           </content>
                        </ScrollPane>
                     </children>
                  </HBox>
               </children>
            </VBox>
         </children>
         <VBox.margin>
            <Insets bottom="15.0" />
         </VBox.margin>
      </HBox>
   </children>
   <padding>
      <Insets bottom="25.0" left="25.0" right="25.0" />
   </padding>
</VBox>

Main.java
Java: 
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.net.URL;
import java.util.ResourceBundle;

public class Main extends Application {

    @FXML
    private ScrollPane sp_thumbnailScrollPane;

    @FXML
    private ImageView iv_imageview;

    @FXML
    private VBox vbox_thumbnailVBox;

    private static final int MAX_INDEX = 5;
    private int selectedThumbnail = 0;

    @Override
    public void start(Stage stage) throws Exception {
        FXMLLoader loader = new FXMLLoader(Main.class.getResource("view.fxml"));
        VBox vbox =  (VBox)loader.load();

        stage.setScene(new Scene(vbox));

        stage.show();
    }

    @FXML
    void initialize(URL location, ResourceBundle bundle) {
        this.zoomToActualThumbnail();
    }

    private void zoomToActualThumbnail() {
        //Set Selection Border
        this.setBorderForActualThumbnail();

        double height = this.sp_thumbnailScrollPane.getContent().getBoundsInLocal().getHeight();
        double y = this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail).getBoundsInParent().getMinY();
        this.sp_thumbnailScrollPane.setVvalue(this.sp_thumbnailScrollPane.getVmax() *  (y / height));



    }

    private void setBorderForActualThumbnail() {
        //remove all borders
        for (Node node : this.vbox_thumbnailVBox.getChildren()) {
            node.getStyleClass().clear();
            node.setStyle("-fx-border-color: transparent");
        }

        this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail).setStyle("-fx-border-color: rgb(61,105,156);-fx-border-insets: -1px;-fx-border-width: 3px;");
        this.iv_imageview.setImage(((ImageView) ((BorderPane) this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail)).getCenter()).getImage());
    }

    @FXML
    void goFirstPressed(ActionEvent event) {
        this.selectedThumbnail = 0;
        this.zoomToActualThumbnail();
    }

    @FXML
    void previousPressed(ActionEvent event) {
        if(this.selectedThumbnail > 0) {
            this.selectedThumbnail -= 1;
        }
        this.zoomToActualThumbnail();
    }

    @FXML
    void nextPressed(ActionEvent event) {
        if(this.selectedThumbnail < Main.MAX_INDEX-1) {
            this.selectedThumbnail += 1;
        }
        this.zoomToActualThumbnail();
    }

    @FXML
    void goLastPressed(ActionEvent event) {
        this.selectedThumbnail = MAX_INDEX-1;
        this.zoomToActualThumbnail();
    }



    public static void main(String[] args) {
        launch(args);
    }
}

Ich bin für jede Hilfe dankbar!
Viele Grüße
Woggle

Edit: Projekt zum Download angehängt
 

Anhänge

Zuletzt bearbeitet:
Ich hab leider zu wenig Zeit, um mal dein Projekt auszuprobieren... Sonst hätte ich schon mal etwas gesagt. Sorry...
 
Hatte auch keine Lust was zu machen. Da fehlt zu viel, sehr viel unwissen und man muss ziemlich viele Parameter beachten, um das sauber zu lösen ... Im Großen und Ganzen musst du dir setVvalue anschauen und verstehen. Sobald du das getan hast, ist es nur noch einfache Mathematik mit vielen Parametern.

Als Beispiel:
Java: 
this.sp_thumbnailScrollPane.setVvalue(this.sp_thumbnailScrollPane.getVmax() *  (y / height));

Vmax enspricht 1.0, da du es nicht festlegst. 1 * x ist immer x. Macht somit keinen Unterschied zu:

Java: 
this.sp_thumbnailScrollPane.setVvalue(y / height);

Zudem steht in der JavaDoc von setVvalue eindeutig:

When vvalue equals vmax, the contained node is positioned so that its layoutBounds maxY is visible.
Zum Vergrößern anklicken....

Eine simples Sysout zeigt, dass beim letzten Element das Vvalue auf 0.810126582278481 gesetzt wird. Es müsste eigentlich 1.0 sein. Schaut man sich deine Rechnung an, fällt sofort auf, was der Fehler ist ... ".getMinY()" ermittelt nur den obersten Y-Wert. Möchtest du dein erstes Vorschaubild (oben) darstellen ist das korrekt. Bei dem letzten bräuchtest du getMaxY().

... der Startwert von Vvalue ist 0.01694915254237288. Zwar sehr nah an der 0.0, aber entspricht nicht genau 0. Somit ermittelst du deine Werte nicht korrekt oder es gibt Probleme bei der Rundung ...

Die Liste könnte ich noch deutlich ausweiten. Es fehlt einiges und das Ziel ist extrem Weit entfernt. Vielleicht hilft dir dennisbauer weiter: http://www.java-forum.org/awt-swing...misst-welche-waeren-essenziell-notwendig.html
 
Hallo Ruzmanz und dzim,

danke schonmal für die Hilfe. Ich habe das Problem tatsächlich unterschätzt und dachte das wäre trivialer. Leider war es das nicht wie ich nun festgestellt habe 😀
Dank den Hinweisen von Ruzmanz und folgendem Stackoverflow Eintrag JavaFX ScrollPane update viewportBounds on scroll - Stack Overflow zur Berechnung des Offsets des Viewports konnte ich das Problem lösen.

Der Vertikale Offset berechnet sich (entsprechend dem Link oben) nach folgendermaßen:
Java: 
            double vmin = scrollPane.getVmin();
            double vmax = scrollPane.getVmax();
            double vvalue = scrollPane.getVvalue();
            double contentHeight = content.getLayoutBounds().getHeight();
            double viewportHeight = scrollPane.getViewportBounds().getHeight();

            double voffset = Math.max(0,  contentHeight - viewportHeight) * (vvalue - vmin) / (vmax - vmin);

Diese Formel kann man nun auch nach vvalue auflösen, um für einen gegebenen Offset wieder die Scrollbarposition vvalue zu bekommen:

Java: 
double vvalue = vmin + ((offset * (vmax - vmin)) / Math.max(0,  contentHeight - viewportHeight));

somit kommt man letztendlich auf folgende Berechnungen, um die Scrollbar entsprechend meiner Anforderungen verschieben zu können:

Java: 
        //Calculate position
        double minY = this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail).getBoundsInParent().getMinY();
        double maxY = this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail).getBoundsInParent().getMaxY();
        double viewportHeight = this.sp_thumbnailScrollPane.getViewportBounds().getHeight();

        double voffset = this.getThumbnailScrollbarOffset();

        if(minY < voffset)  {
            //Bild ist oben abgeschnitten
            this.sp_thumbnailScrollPane.setVvalue(this.getVvalueFromOffset(minY));
        } else if ( maxY >= voffset+viewportHeight) {
            //Bild ist unten abgeschnitten
            this.sp_thumbnailScrollPane.setVvalue(this.getVvalueFromOffset(maxY-viewportHeight));
        }

Die entsprechenden Offsets kann man sich mit Hilfe einer Skizze herleiten.

Ich bedanke mich bei den Helfenden und hoffe, dass ich dadurch auch Anderen helfen konnte 🙂


Hier noch der gesamte Code für die Main.java (Man erkennt es besser, wenn man für die ImageViews unterschiedliche Bilder nimmt)
Java: 
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.net.URL;
import java.util.ResourceBundle;

public class Main extends Application {

    @FXML
    private ScrollPane sp_thumbnailScrollPane;

    @FXML
    private ImageView iv_imageview;

    @FXML
    private VBox vbox_thumbnailVBox;

    private static final int MAX_INDEX = 5;
    private int selectedThumbnail = 0;

    @Override
    public void start(Stage stage) throws Exception {
        FXMLLoader loader = new FXMLLoader(Main.class.getResource("view.fxml"));
        VBox vbox =  (VBox)loader.load();

        stage.setScene(new Scene(vbox));

        stage.show();
    }

    @FXML
    void initialize(URL location, ResourceBundle bundle) {
        this.zoomToActualThumbnail();
    }

    private void zoomToActualThumbnail() {
        this.setBorderForActualThumbnail();

        //Calculate position
        double minY = this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail).getBoundsInParent().getMinY();
        double maxY = this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail).getBoundsInParent().getMaxY();
        double viewportHeight = this.sp_thumbnailScrollPane.getViewportBounds().getHeight();

        double voffset = this.getThumbnailScrollbarOffset();

        if(minY < voffset)  {
            //Bild ist oben abgeschnitten
            this.sp_thumbnailScrollPane.setVvalue(this.getVvalueFromOffset(minY));
        } else if ( maxY >= voffset+viewportHeight) {
            //Bild ist unten abgeschnitten
            this.sp_thumbnailScrollPane.setVvalue(this.getVvalueFromOffset(maxY-viewportHeight));
        }
    }

    private double getThumbnailScrollbarOffset() {
        double vmin = this.sp_thumbnailScrollPane.getVmin();
        double vmax = this.sp_thumbnailScrollPane.getVmax();
        double vvalue = this.sp_thumbnailScrollPane.getVvalue();
        double contentHeight = this.vbox_thumbnailVBox.getLayoutBounds().getHeight();
        double viewportHeight = this.sp_thumbnailScrollPane.getViewportBounds().getHeight();

        return Math.max(0,  contentHeight - viewportHeight) * (vvalue - vmin) / (vmax - vmin);
    }

    private double getVvalueFromOffset(double offset) {
        double vmin = this.sp_thumbnailScrollPane.getVmin();
        double vmax = this.sp_thumbnailScrollPane.getVmax();
        double contentHeight = this.vbox_thumbnailVBox.getLayoutBounds().getHeight();
        double viewportHeight = this.sp_thumbnailScrollPane.getViewportBounds().getHeight();

        return vmin + ((offset * (vmax - vmin)) / Math.max(0,  contentHeight - viewportHeight));
    }

    private void setBorderForActualThumbnail() {
        //remove all borders
        for (Node node : this.vbox_thumbnailVBox.getChildren()) {
            node.getStyleClass().clear();
            node.setStyle("-fx-border-color: transparent");
        }

        this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail).setStyle("-fx-border-color: rgb(61,105,156);-fx-border-insets: -1px;-fx-border-width: 3px;");
        this.iv_imageview.setImage(((ImageView) ((BorderPane) this.vbox_thumbnailVBox.getChildren().get(this.selectedThumbnail)).getCenter()).getImage());
    }

    @FXML
    void goFirstPressed(ActionEvent event) {
        this.selectedThumbnail = 0;
        this.zoomToActualThumbnail();
    }

    @FXML
    void previousPressed(ActionEvent event) {
        if(this.selectedThumbnail > 0) {
            this.selectedThumbnail -= 1;
        }
        this.zoomToActualThumbnail();
    }

    @FXML
    void nextPressed(ActionEvent event) {
        if(this.selectedThumbnail < Main.MAX_INDEX-1) {
            this.selectedThumbnail += 1;
        }
        this.zoomToActualThumbnail();
    }

    @FXML
    void goLastPressed(ActionEvent event) {
        this.selectedThumbnail = MAX_INDEX-1;
        this.zoomToActualThumbnail();
    }



    public static void main(String[] args) {
        launch(args);
    }
}

Vielen Dank!
Viele Grüße
Woggle


EDIT:
Ich weis, dass VMax 1 und VMin 0 sind in meinem Beispiel, aber so sollte es auch allgemein funktionieren, sollte jemand diese Werte geändert haben.
 
Zuletzt bearbeitet:

Aktuelle Jobs

Neue Themen

Ähnliche Themen

Image Skalierung in Scrollpane, Scrollpane resized sich nicht
Antworten: 5
Scrollpane verschmiert beim scrollen
Antworten: 5
Mehrere Textfelder in Scrollpane einfügen und dann zum Scrollen bringen?
Antworten: 4
Canvas in ScrollPane wird beim scrollen immer neu gezeichnet
Antworten: 3
Zum Ende einer Scrollpane scrollen
Antworten: 2

Zurück
Oben