JFX将图像向上和向下缩放到父级 [英] JFX scale image up and down to parent

问题描述

我正在尝试使用与其父级缩放的ImageView。我已经搜索了我可以找到的每个StackOverflow帖子，这是我尝试过的：

I am attempting to have an ImageView that scales with its parent. I have searched through every StackOverflow post I can find on this, and here is what I've tried:

        taggedImage.setPreserveRatio(true);
    //taggedImage.fitWidthProperty().bind(
    //      Bindings.min(imagePane.widthProperty(), imagePane.widthProperty()));
    //taggedImage.fitHeightProperty().bind(
    //      Bindings.min(imagePane.heightProperty(), imagePane.heightProperty()));
    taggedImage.fitWidthProperty().bind(imagePane.widthProperty());
    taggedImage.fitHeightProperty().bind(imagePane.heightProperty());

我试过的注释行和这些方法的问题是当imageview绑定到父母，父母只能扩大而不是缩小。因此，如果增加窗口的大小，图片会变大。如果再次缩小图片尺寸，则不会减小图片尺寸。在此示例中，imagePane是StackPane。我也尝试过borderFrame。同样，我尝试使用Pane作为父母。这样，图像可以成功地向上和向下缩放。但是，如果图像与窗格的大小完全不匹配，则图像不会居中，并始终位于窗格的左上角。

The commented lines I tried as well and the issue with these approaches is that when the imageview binds to the parent, the parent can only scale up and not down. Therefore, if you increase the size of the window, the picture will get bigger. If you decrease the size of the picture again, it doesn't decrease the picture size. In this example, imagePane is a StackPane. I have also tried a borderFrame. As well, I've tried using a Pane as the parent. This way, the image successfully scales up and down. However, the image isnt centered and is always in the top left corner of the pane if it doesnt match the size of the pane exactly.

场景树：
https://gyazo.com/45e0daebbfd98dfd3446185d21eb91ee

值：

热门网格框：

https ：//gyazo.com/f48ebb39f48d876a02d44792a73eaad4

较低级别网格窗格：

https://gyazo.com/3399d9f3ab00e8babd36ee3b0e3b27ba

BorderPane：

https://gyazo.com/51c24f8de50ae3865a299fdddf3a1490

ImageView：

https：// gyazo .com / 7dfc1071d2b516a83baed301596be2b9

注意，这里我尝试使用borderpane而不是之前使用的。但是，无论哪个对象是imageview的父对象，结果都是相同的。

Note, here I'm trying it with a borderpane instead of what I was using before. However, the result is the same no matter which object is the parent of the imageview.

推荐答案

已解决。我一直在乱搞并找到了解决办法。这不是很直观，但它对我有用：我将图像留在边框内，在java代码中，我在网格窗格的同一部分创建了一个窗格作为图像。然后我将imageview的宽度和高度绑定到窗格。然后，图像的居中以及缩放是正确的。
这是我做的：

Solved. I've been messing around and found a fix. This isn't exactly intuitive but it worked for me: I left the image inside the borderframe and, in the java code, I created a pane in the same part of the gridpane as the image. I then bound the imageview's width and height to the pane. Then, the centering of the image was correct as well as the scaling. Here is what i did:

    imageView.setPreserveRatio(true);
    Pane pane = new Pane();
    testGridPane.add(pane, 1, 1);
    imageView.fitWidthProperty().bind(pane.widthProperty());
    imageView.fitHeightProperty().bind(pane.heightProperty());

这篇关于JFX将图像向上和向下缩放到父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！