如何实现JavaFX MediaView拉伸与缩放媒体以适配父容器？

嘿，我来帮你搞定这个MediaView适配的问题！你之前的代码能让视频放大填充容器，但没法缩小到比原视频尺寸小，只会裁剪内容对吧？核心问题是没考虑保持媒体的宽高比，而且直接绑定容器尺寸会导致变形或者裁剪。下面给你两种常用的解决方案，按需选择：

方案1：保持媒体完整显示（无裁剪，可能留黑边） #

这种方式会让媒体按比例缩放，始终完整显示在容器里，不管容器是变大还是变小。如果容器比例和媒体不一致，会在两侧或上下留黑边。

步骤： #

1. 先修改FXML，去掉直接绑定fitHeight和fitWidth的代码：

<Pane fx:id="mediaViewPane">
    <children>
        <MediaView fx:id="videoView" />
    </children>
</Pane>

2. 在Controller里监听容器尺寸变化，动态计算适配的尺寸：

public class MediaController implements Initializable {
    @FXML
    private Pane mediaViewPane;
    @FXML
    private MediaView videoView;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        MediaPlayer mediaPlayer = videoView.getMediaPlayer();
        if (mediaPlayer != null) {
            // 等媒体加载完成后再获取原始尺寸
            mediaPlayer.setOnReady(() -> {
                Media media = mediaPlayer.getMedia();
                double originalMediaWidth = media.getWidth();
                double originalMediaHeight = media.getHeight();

                // 定义尺寸变化的监听逻辑
                InvalidationListener resizeHandler = obs -> {
                    double paneWidth = mediaViewPane.getWidth();
                    double paneHeight = mediaViewPane.getHeight();

                    // 避免初始尺寸为0的情况
                    if (originalMediaWidth <= 0 || originalMediaHeight <= 0 || paneWidth <= 0 || paneHeight <= 0) {
                        return;
                    }

                    // 计算缩放比例：取容器与媒体宽高比中较小的那个，保证媒体完整显示
                    double scaleFactor = Math.min(paneWidth / originalMediaWidth, paneHeight / originalMediaHeight);

                    // 设置MediaView的适配尺寸
                    videoView.setFitWidth(originalMediaWidth * scaleFactor);
                    videoView.setFitHeight(originalMediaHeight * scaleFactor);

                    // 可选：让MediaView在容器中居中显示
                    videoView.setX((paneWidth - videoView.getFitWidth()) / 2);
                    videoView.setY((paneHeight - videoView.getFitHeight()) / 2);
                };

                // 给容器的宽高属性添加监听
                mediaViewPane.widthProperty().addListener(resizeHandler);
                mediaViewPane.heightProperty().addListener(resizeHandler);

                // 初始化时手动触发一次适配
                resizeHandler.invalidated(null);
            });
        }
    }
}

方案2：填满整个容器（可能裁剪媒体） #

如果想要媒体完全填充容器，不管比例是否一致（类似视频播放器的“全屏填充”模式），只需要把上面代码里的Math.min改成Math.max就行：

double scaleFactor = Math.max(paneWidth / originalMediaWidth, paneHeight / originalMediaHeight);

这样媒体会按比例放大/缩小到填满容器，超出的部分会被裁剪掉。

为什么原来的代码不行？ #

你之前直接绑定fitHeight="${mediaViewPane.height}"和fitWidth="${mediaViewPane.width}"，相当于强制MediaView和容器尺寸完全一致，完全忽略了媒体本身的宽高比：

• 当容器比媒体大时：媒体被拉伸变形，填满容器
• 当容器比媒体小时：MediaView还是容器的尺寸，媒体内容会被裁剪，而不是缩小适配

用上面的监听方式，就能同时支持拉伸放大和缩小适配，还能保持媒体的比例，不会变形~

内容的提问来源于stack exchange，提问作者Pablo Fernandez