How to preserve image ratio and resize image according to its actual size?

问题

I have searched and googled a lot but can't find a simple solution to this. I want to resize the image according to its actual size and preserving the image ratio at the same time. As you can see from the following sample code, with the preserveRatio property set to true, I am able to resize the image. However, as I resize pass the actual width or height of the image, a white space will appear. How can I resize it without the appearance of the white space?

package test;

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


public class Test extends Application {
   private ImageView imageView = new ImageView();
   @Override
   public void start(Stage primaryStage) {

      imageView.setImage(new        Image("https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/800px-Siberischer_tiger_de_edit02.jpg"));
      imageView.preserveRatioProperty().set(true);

      StackPane root = new StackPane();
      root.getChildren().add(imageView);

      imageView.fitHeightProperty().bind(root.heightProperty());
      imageView.fitWidthProperty().bind(root.widthProperty());

      Scene scene = new Scene(root, 300, 250);

      primaryStage.setTitle("Test Image Resizing");
      primaryStage.setScene(scene);
      primaryStage.show();
  }

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

}

回答1:

You also need to adjust the viewport to make it's dimentions have the correct ratio to fill the whole area with a ImageView:

@Override
public void start(Stage primaryStage) {
    imageView.setImage(new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/800px-Siberischer_tiger_de_edit02.jpg"));
    imageView.setPreserveRatio(true);

    StackPane root = new StackPane();
    root.getChildren().add(imageView);
    root.layoutBoundsProperty().addListener((observable, oldValue, newValue) -> {
        double w = newValue.getWidth();
        double h = newValue.getHeight();
        imageView.setFitWidth(w);
        imageView.setFitHeight(h);
        double ratio = h / w;
        Image image = imageView.getImage();
        double ih = image.getHeight();
        double iw = image.getWidth();
        double vR = ih / iw;
        imageView.setViewport((ratio < vR) ? new Rectangle2D(0, 0, iw, iw * ratio) : new Rectangle2D(0, 0, ih / ratio, ih));
    });

    Scene scene = new Scene(root, 300, 250);

    primaryStage.setTitle("Test Image Resizing");
    primaryStage.setScene(scene);
    primaryStage.show();
}

In this case you can achieve the same effect by using the image as background image for root:

@Override
public void start(Stage primaryStage) {
    StackPane root = new StackPane();
    root.setBackground(new Background(
            new BackgroundImage(new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/800px-Siberischer_tiger_de_edit02.jpg"),
                    BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, new BackgroundSize(0, 0, false, false, false, true)
            )));

    Scene scene = new Scene(root, 300, 250);

    primaryStage.setTitle("Test Image Resizing");
    primaryStage.setScene(scene);
    primaryStage.show();
}

来源：https://stackoverflow.com/questions/41659245/how-to-preserve-image-ratio-and-resize-image-according-to-its-actual-size

标签

java

image

javafx