如何缩放和设置MediaView的坐标？ [英] How to scale and set coordinates of MediaView?

问题描述

我想在我的JavaFx 2.x场景中嵌入一个视频，并调整它的大小并将其重新定位到我的需要。我遇到的问题是跟随。如果我构建一个 MediaView 组件，然后翻译X或Y坐标，那么整个视图正在正确移动，如下所示：

I would like to embedd a video in my JavaFx 2.x scene and also resize it and relocate it to my needs. The problem I'm having is following. If I build a MediaView component and then translate X or Y coordinate, then the whole view is being properly moved like so:

MediaView mv = (...)
mv.setTranslateX(200);
mv.setTranslateY(200);

我可以使用缩放属性进行类似的转换：

I could do a similar transformation with scaling property:

MediaView mv = (...)
mv.setScaleX(2);
mv.setScaleY(2);

正确扩展 mv 实例两次。

然而，问题在于我将这两个翻译结合起来。正在缩放 mv 实例，但始终以屏幕坐标结束（0,0） 。从我的角度来看，这当然是不正确的行为。

However, the problem is when I combine those two translations. The mv instance is being scaled but it always ends up in screen coordinates (0,0). This is of course incorrect behavior from my perspective.

我还试图在一些包装器中包装我的 MediaView 组件节点，如 Group ，并对此元素执行翻译。行为是一样的。

I have also tried to wrap my MediaView component within some wrapper node, like Group and perform translations on this element. The behavior is the same.

如何在同一时间正确移动和缩放 MediaView 组件？

How can I properly move and scale MediaView component at the same time?

编辑：

这是我的代码，虽然我在这里使用 ImageView的。然而，这是无关紧要的。运行此代码后，图像将放在（0,0）而不是（100,100）。

Here is my code, although I'm using here ImageView. This is irrelevant, however. After running this code, image will be placed at (0,0) instead of (100,100).

    @Override
    public void start(Stage stage) throws Exception {
        Group root = new Group();

        // Img's dimension is 200x200
        javafx.scene.image.Image img = new javafx.scene.image.Image("/home/bachman/projects/cs-player/src/main/resources/content.png");
        ImageView iv = new ImageView(img);
        root.getChildren().add(iv);

        // Move Image View
        iv.setTranslateX(100);
        iv.setTranslateY(100);

        // Scale Image View
        iv.setScaleX(2.0);
        iv.setScaleY(2.0);

        Scene scene = new Scene(root);
        stage.setWidth(600);
        stage.setHeight(600);
        stage.setScene(scene);
        stage.show();
    }

推荐答案

使用setScaleX时，setScaleY ，缩放发生在节点的中心。

When you use setScaleX, setScaleY, scaling occurs from the center of the node.

如果除了缩放之外还要翻译一定数量，则需要在设置时考虑缩放扩展所需的翻译值。例如，如果节点的大小加倍（并且您希望将节点转换为相对于未缩放节点左上角的位置），则需要将节点宽度和高度的一半转换。

If you want to translate by an amount in addition to scaling, you need to take the scaling expansion into account when you set the required translation values. For example, if the node doubles in size (and you want to translate the node to a position relative to the upper left corner of the unscaled node), you need to translate by an additional half the node width and height.

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.media.*;
import javafx.scene.transform.*;
import javafx.stage.Stage;

public class TransformedVideo extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    final MediaPlayer oracleVid = new MediaPlayer(new Media("http://download.oracle.com/otndocs/products/javafx/oow2010-2.flv"));
    final MediaView mediaView = new MediaView(oracleVid);
    mediaView.setFitWidth(320); mediaView.setFitHeight(240); mediaView.setPreserveRatio(false);

    mediaView.setTranslateX(mediaView.getFitWidth()  / 2 + 200); 
    mediaView.setTranslateY(mediaView.getFitHeight() / 2 + 200);
    mediaView.setScaleX(2); mediaView.setScaleY(2);

// alternative method of scaling and translating.    
//    mediaView.getTransforms().addAll(
//      new Translate(200, 200),
//      new Scale(2, 2)
//    );

    Group group = new Group(mediaView);
    stage.setScene(new Scene(group, 1250, 800));
    stage.show();

    oracleVid.play();

    System.out.println(group.getBoundsInParent());
  }
}

在节点上执行多次转换时，而不是使用在setScale / setTransform / setRotate方法中，通常更容易为getTransforms（）方法提供转换列表。

When performing multiple transforms on a node, rather than using the setScale/setTransform/setRotate methods, it is often easier to just supply a list of transforms to the getTransforms() method.

这篇关于如何缩放和设置MediaView的坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！