如何保持图像比例并根据实际尺寸调整图像尺寸? [英] How to preserve image ratio and resize image according to its actual size?

问题描述

我已经搜索和搜索了很多，但是找不到一个简单的解决方案.我想根据实际大小调整图像大小，并同时保留图像比例.从下面的示例代码中可以看到，将prepareRatio属性设置为true，我可以调整图像的大小.但是，当我调整大小通过图像的实际宽度或高度时，将出现空白.如何在没有空白的情况下调整其大小?

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);
    }

}

推荐答案

您还需要调整视口，以使其尺寸正确，以 ImageView 填充整个区域:

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();
}

在这种情况下，您可以通过将图像用作 root 的背景图像来达到相同的效果:

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();
}

这篇关于如何保持图像比例并根据实际尺寸调整图像尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！