java - 如何在 javafx 的 imageView 中填充图像？

Question

我在我的数据库中保存了一张图像，该图像作为字节数组传递给图像，然后加载到 ImageView 。但是，我无法让它填充 imageView。我使用以下代码:

package com.example.AppPrototipo.ui.tourist;

imports...

@Component
public class ExperienceController {

    @FXML
    Pane imagePane;

    @FXML
    ImageView imageViewPrincipal;

    private final ExperienceRepository experienceRepository;

    public ExperienceController(ExperienceRepository experienceRepository) {
        this.experienceRepository = experienceRepository;
    }

    @FXML
    private void initialize(){

        Experience experience = experienceRepository.findById(1);

        Image image = new Image(new ByteArrayInputStream(experience.getImages().get(0).getImageData()));
        imageViewPrincipal.setImage(image);
        imageViewPrincipal.fitWidthProperty().bind(imagePane.widthProperty());
        imageViewPrincipal.fitHeightProperty().bind(imagePane.heightProperty());


    }
}

这是我得到的结果:

期望的结果是图像通过裁剪顶部和底部并保持居中来填充整个宽度(填充黑色边)。谁能帮帮我？

Answer 1

假设您在 ImageView 上将 preserveRatio 属性设置为 true，并且 matt stated是他的注释，你只需要设置其中之一，比如fitWidth，fitHeight将使用图像比例计算。

问题是图像和 Pane 的比例不匹配，因此您需要使用 setViewport 进行一些裁剪，最好在 Pane 的高度或宽度发生变化时进行裁剪。

你需要做的是计算图片的比例，并与 Pane 的比例进行比较，比较会让你决定是否保持图片的原始宽度或原始高度，你会使用 Pane 的比率计算另一个。

不太确定这是否是最佳实践，但这是我所描述内容的代码

    double oldImageWidth = image.getWidth(), oldImageHeight = image.getHeight();            //saving the original image size and ratio
    double imageRatio = oldImageWidth / oldImageHeight;

    imageViewPrincipal.setImage(image);

    ChangeListener<Number> listener = (obs, ov, nv) -> {
        double paneWidth = imagePane.getWidth();
        double paneHeight = imagePane.getHeight();

        double paneRatio = paneWidth / paneHeight;                                          //calculating the new pane's ratio 
                                                                                            //after width or height changed
        double newImageWidth = oldImageWidth, newImageHeight = oldImageHeight;
        
        if (paneRatio > imageRatio) {
            newImageHeight = oldImageWidth / paneRatio;
        } else if (paneRatio < imageRatio) {
            newImageWidth = oldImageHeight * paneRatio;
        }
        
        imageViewPrincipal.setViewport(new Rectangle2D(                                     // The rectangle used to crop
                (oldImageWidth - newImageWidth) / 2, (oldImageHeight - newImageHeight) / 2, //MinX and MinY to crop from the center
                newImageWidth, newImageHeight)                                              // new width and height
            );
        
        imageViewPrincipal.setFitWidth(paneWidth);
    };

    imagePane.widthProperty().addListener(listener);
    imagePane.heightProperty().addListener(listener);

这是它的样子