Wednesday, January 9, 2013

Make ImageView scrollable, in ScrollPane.

Last example demonstrate "Use JavaFX FileChooser to open image file, and display on ImageView". In case a large image is opened, it cannot display the whole image; we can place the ImageView in ScrollPane, such that user can scroll the ImageView.

Scrollable ImageView
Scrollable ImageView


package javafxpixel;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.application.Application;
import javafx.embed.swing.SwingFXUtils;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.stage.FileChooser;
import javafx.stage.Stage;
import javax.imageio.ImageIO;

/**
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFXPixel extends Application {
    
    ImageView myImageView;
    ScrollPane scrollPane;
    
    @Override
    public void start(Stage primaryStage) {
        
        Button btnLoad = new Button("Load");
        btnLoad.setOnAction(btnLoadEventListener);
        
        myImageView = new ImageView();
        
        scrollPane = new ScrollPane();
        scrollPane.setPrefSize(300, 250);
        scrollPane.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);
        scrollPane.setHbarPolicy(ScrollBarPolicy.AS_NEEDED);
        scrollPane.setContent(myImageView);

        VBox rootBox = new VBox();
        rootBox.getChildren().addAll(btnLoad, scrollPane);
        
        Scene scene = new Scene(rootBox, 300, 300);
        
        primaryStage.setTitle("java-buddy.blogspot.com");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
    
    EventHandler<ActionEvent> btnLoadEventListener
    = new EventHandler<ActionEvent>(){

        @Override
        public void handle(ActionEvent t) {
            FileChooser fileChooser = new FileChooser();
            
            //Set extension filter
            FileChooser.ExtensionFilter extFilterJPG = new FileChooser.ExtensionFilter("JPG files (*.jpg)", "*.JPG");
            FileChooser.ExtensionFilter extFilterPNG = new FileChooser.ExtensionFilter("PNG files (*.png)", "*.PNG");
            fileChooser.getExtensionFilters().addAll(extFilterJPG, extFilterPNG);
             
            //Show open file dialog
            File file = fileChooser.showOpenDialog(null);
                      
            try {
                BufferedImage bufferedImage = ImageIO.read(file);
                Image image = SwingFXUtils.toFXImage(bufferedImage, null);
                myImageView.setImage(image);
                scrollPane.setContent(null);
                scrollPane.setContent(myImageView);
            } catch (IOException ex) {
                Logger.getLogger(JavaFXPixel.class.getName()).log(Level.SEVERE, null, ex);
            }

        }
    };
}


Remark: In the testing on the code, I have to call scrollPane.setContent() with null before call scrollPane.setContent() with update ImageView; otherwise the scrollbar will not be updated to the new image.

Related:
- Auto fit JavaFX 2 ImageView

2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Got it:
    ---
    /**
    *
    * @author 4F2E4A2E
    */
    public class ZoomExample extends Application {

    private ImageView imageView = new ImageView();
    private ScrollPane scrollPane = new ScrollPane();
    final DoubleProperty zoomProperty = new SimpleDoubleProperty(200);

    @Override
    public void start(Stage stage) throws Exception {

    zoomProperty.addListener(new InvalidationListener() {
    @Override
    public void invalidated(Observable arg0) {
    imageView.setFitWidth(zoomProperty.get() * 4);
    imageView.setFitHeight(zoomProperty.get() * 3);
    }
    });

    scrollPane.addEventFilter(ScrollEvent.ANY, new EventHandler() {
    @Override
    public void handle(ScrollEvent event) {
    if (event.getDeltaY() > 0) {
    zoomProperty.set(zoomProperty.get() * 1.1);
    } else if (event.getDeltaY() < 0) {
    zoomProperty.set(zoomProperty.get() / 1.1);
    }
    }
    });

    imageView.setImage(new Image("http://mikecann.co.uk/wp-content/uploads/2009/12/javafx_logo_color_1.jpg"));
    imageView.preserveRatioProperty().set(true);
    scrollPane.setContent(imageView);

    stage.setScene(new Scene(scrollPane, 400, 300));
    stage.show();

    }

    /**
    * @param args
    */
    public static void main(String[] args) {
    launch(args);
    }
    }

    ReplyDelete