JavaFX中如何拉伸MediaView并保持其在容器内居中显示

你的问题核心在于错误地将fitWidth和fitHeight直接绑定到容器的宽高，导致两者差值始终为0，自然无法计算出有效的偏移量。当preserveRatio设为true时，MediaView会自动保持媒体的宽高比，此时它的实际显示尺寸（媒体内容的尺寸）并不会完全等于容器的尺寸，而是会根据比例缩放，剩下的区域会留空——我们需要让这个缩放后的媒体内容在容器中居中，而不是让MediaView本身居中（因为它已经占满容器了）。

下面是两种可行的解决方案：

方案一：基于媒体原始宽高比动态计算（推荐） #

这种方法通过比较容器和媒体的宽高比，动态调整MediaView的fitWidth/fitHeight，同时计算居中所需的偏移量：

// 假设你已经加载好媒体对象
Media media = ...;
// 获取媒体的原始宽高比
double mediaRatio = media.getWidth() / media.getHeight();

mainMediaView.setPreserveRatio(true);

// 计算容器的实时宽高比
DoubleBinding containerRatio = centerAnchorPane.widthProperty()
        .divide(centerAnchorPane.heightProperty());

// 动态绑定fitWidth：当容器更宽时，按容器高度缩放；否则按容器宽度缩放
mainMediaView.fitWidthProperty().bind(Bindings.when(containerRatio.greaterThan(mediaRatio))
        .then(centerAnchorPane.heightProperty().multiply(mediaRatio))
        .otherwise(centerAnchorPane.widthProperty()));

// 动态绑定fitHeight：当容器更高时，按容器宽度缩放；否则按容器高度缩放
mainMediaView.fitHeightProperty().bind(Bindings.when(containerRatio.lessThan(mediaRatio))
        .then(centerAnchorPane.widthProperty().divide(mediaRatio))
        .otherwise(centerAnchorPane.heightProperty()));

// X轴居中：仅当容器更宽时，计算左右偏移量
mainMediaView.translateXProperty().bind(Bindings.when(containerRatio.greaterThan(mediaRatio))
        .then(centerAnchorPane.widthProperty().subtract(mainMediaView.fitWidthProperty()).divide(2))
        .otherwise(0));

// Y轴居中：仅当容器更高时，计算上下偏移量
mainMediaView.translateYProperty().bind(Bindings.when(containerRatio.lessThan(mediaRatio))
        .then(centerAnchorPane.heightProperty().subtract(mainMediaView.fitHeightProperty()).divide(2))
        .otherwise(0));

代码解释： #

1. 我们先获取媒体的原始宽高比，作为缩放的基准；
2. 通过DoubleBinding实时计算容器的宽高比，判断当前容器是偏宽还是偏高；
3. 根据宽高比的对比结果，动态设置fitWidth和fitHeight，确保媒体始终按比例最大化填充容器；
4. 最后根据容器和媒体显示尺寸的差值，计算居中所需的translateX和translateY，仅在需要时生效（比如容器偏宽时只需要X轴偏移，偏高时只需要Y轴偏移）。

方案二：利用MediaView的layoutBounds自动计算 #

如果你不想手动处理宽高比，可以直接利用MediaView的layoutBounds属性（它代表媒体内容实际显示的尺寸）来计算偏移量：

mainMediaView.setPreserveRatio(true);
// 让MediaView尽可能填充容器（但保持比例）
mainMediaView.fitWidthProperty().bind(centerAnchorPane.widthProperty());
mainMediaView.fitHeightProperty().bind(centerAnchorPane.heightProperty());

// 提取媒体实际显示的宽高
DoubleBinding mediaDisplayWidth = Bindings.selectDouble(mainMediaView.layoutBoundsProperty(), "width");
DoubleBinding mediaDisplayHeight = Bindings.selectDouble(mainMediaView.layoutBoundsProperty(), "height");

// 绑定居中偏移量
mainMediaView.translateXProperty().bind(centerAnchorPane.widthProperty()
        .subtract(mediaDisplayWidth).divide(2));
mainMediaView.translateYProperty().bind(centerAnchorPane.heightProperty()
        .subtract(mediaDisplayHeight).divide(2));

代码解释： #

layoutBounds会自动反映媒体内容实际显示的尺寸（当preserveRatio为true时，它不等于MediaView的fitWidth/fitHeight），我们通过Bindings.selectDouble提取这个尺寸的宽和高，再计算与容器的差值的一半，就能实现居中。

这种方法更简洁，但依赖JavaFX内部的布局计算，如果你需要更精确的控制，方案一更稳妥。

内容的提问来源于stack exchange，提问作者Hocine Abdellatif Houari