CODEWITHSUNDEEP
imageviewjavafx-8
user4676340
user4676340

Reputation:

Centering an image in an ImageView

I am currently trying to center an image in an ImageView using JavaFX.

So I load the image in the view : 

Image img = new Image("...");
imageView.setImage(img);

and let's suppose the image is huge (2000x3000) and not the ImageView (400x100)

The rendered image will be aligned on the left, and I would like to put in the center of the ImageView :

enter image description here

Is there anyway to perform that ?

Upvotes: 8

Views: 20828

Answers (3)

Massimo B
Massimo B

Reputation: 1

Here's how I would do it

import javafx.geometry.Pos;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;

Image img = new Image("...");
imageView imgView = new imageView(img);

HBox hbxImg = new HBox();
hbxImg.setAlignment(Pos.CENTER);
hbxImg.getChildren().add(imgView);

That'll put an image in an empty HBox you can align to the horizontal center of the canvas.

Upvotes: 0

user4676340
user4676340

Reputation:

So, after days of calculation, I managed to find a good way to do it.

I post it here in case of someone would like to achieve it.

I created a method that only needs access to the imageView : 

public void centerImage() {
        Image img = imageView.getImage();
        if (img != null) {
            double w = 0;
            double h = 0;

            double ratioX = imageView.getFitWidth() / img.getWidth();
            double ratioY = imageView.getFitHeight() / img.getHeight();

            double reducCoeff = 0;
            if(ratioX >= ratioY) {
                reducCoeff = ratioY;
            } else {
                reducCoeff = ratioX;
            }

            w = img.getWidth() * reducCoeff;
            h = img.getHeight() * reducCoeff;

            imageView.setX((imageView.getFitWidth() - w) / 2);
            imageView.setY((imageView.getFitHeight() - h) / 2);

        }
    }

Upvotes: 16

Ugurcan Yildirim
Ugurcan Yildirim

Reputation: 6132

Here is an example code that might be a solution for your case:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class Test extends Application {

    @Override
    public void start(Stage primaryStage) {

        Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/a/a7/Frankenstein's_monster_(Boris_Karloff).jpg");
        ImageView imageView = new ImageView();
        imageView.setImage(image);
        imageView.setPreserveRatio(true);
        imageView.setFitWidth(400);
        imageView.setFitHeight(300);

        BorderPane pane = new BorderPane();
        pane.setPrefSize(400, 300);
        pane.setCenter(imageView);

        primaryStage.setScene(new Scene(pane));
        primaryStage.show();

    }

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

}

And the result:

enter image description here

Upvotes: 9

Related Questions