JavaFX Image scroll with ScrollPane

Last update on December 21 2024 09:39:59 (UTC/GMT +8 hours)

Write a JavaFX application that includes a ScrollPane to display a large image with scrollbars for navigation.

Sample Solution:

JavaFx Code:

//Main.java

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

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

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Image ScrollPane Example");

        // Load a large image
        Image image = new Image("large_image.png"); // Replace with your image file path

        // Create an ImageView to display the image
        ImageView imageView = new ImageView(image);

        // Create a ScrollPane to display the image with scrollbars
        ScrollPane scrollPane = new ScrollPane(imageView);

        // Set scroll policy to ensure both horizontal and vertical scrollbars appear as needed
        scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);
        scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);

        // Create a StackPane to hold the ScrollPane
        StackPane root = new StackPane();
        root.getChildren().add(scrollPane);

        // Create a scene and add it to the stage
        Scene scene = new Scene(root, 800, 600);
        primaryStage.setScene(scene);

        primaryStage.show();
    }
}

In the exercise above, we load a large image, create an 'ImageView' to display it, and place it within a 'ScrollPane' to provide scrollbars. The scroll policy is set to "AS_NEEDED" for both horizontal and vertical scrollbars. Finally, the 'ScrollPane' is added to a 'StackPane', which is added to the 'Scene' and displayed in the 'Stage'.

Note: Replace "large_image.png" with the path to your own image file.

Sample Output:

Flowchart:

Java Code Editor:

Previous: JJavaFX Honeycomb layout design.
Next: JavaFX Text scroll with ScrollPane.