如何在JavaFX中填充imageView的图像？

Question

如何在JavaFX中填充imageView的图像？

3

我在数据库中保存了一张图片，将其转换为字节数组传递给一个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());


    }
}

这是我得到的结果：

期望的结果是图像填满整个宽度（填充黑色区域），通过裁剪顶部和底部来保持居中。有人能帮我吗？

- Juan Cruz Carrau

从ImageView文档中可以看出，您不希望同时设置fitWidth和fitHeight。您应该只设置fitWidth。如果图像足够瘦，以至于宽度适合屏幕，但高度不足以填充屏幕，您想要发生什么？ - matt

@matt 哦，我不知道。我会试试看的。谢谢！关于你的问题，想法是图像应该在两侧裁剪以进行补偿。 - Juan Cruz Carrau

请注意，在 css 背景图片中有一些属性，可以提供很多灵活性来显示和调整图像的大小。 - jewelsea

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SDIDSA · Accepted Answer

假设您在ImageView上将preserveRatio属性设置为true，并且正如matt在评论中所述，您只需要设置其中一个属性，比如fitWidth，而fitHeight将使用图像比率进行计算。

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

您需要做的是计算图像的比率，并将其与窗格的比率进行比较，比较将使您决定是否保留图像的原始宽度或原始高度，并使用窗格的比率计算另一个值。

不确定这是否是最佳实践，但以下是我所描述的代码。

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

这是它的样子