3

I have an ImageView inside an AnchorPane and I want to resize the Image in the same proposition as the AnchorPane resize.

Can someone explain me how to do that?

Many thanks in advance.

Bashfire
  • 41
  • 2

3 Answers3

2

You can bind the image view's fitWidth and fitHeight properties to the width and height of the anchor pane:

imageView.fitWidthProperty().bind(anchorPane.widthProperty());
imageView.fitHeightProperty().bind(anchorPane.heightProperty());

If you also want to preserve the proportions of the image you are displaying, you can do

imageView.setPreserveRatio(true);
James_D
  • 201,275
  • 16
  • 291
  • 322
  • 1
    Depending on the scene you may also need to set the `managed` property of `imageView` to `false` to prevent it from influencing `min` and `pref` sizes of the `AnchorPane`. – fabian Apr 13 '18 at 15:48
  • Thanks, but this is not working the way I want. I want to keep the distances to sides of the AnchorPane. So if there is a distance to the bottom if the Pane of 30px and I resize the Pane I want to scale the button to keep the 30px distance. Is that possible? – Bashfire Apr 13 '18 at 17:11
  • @Bashfire What button? You hadn't mentioned a button before. You probably need to post a [MCVE] to demonstrate what you're trying to do. – James_D Apr 13 '18 at 17:12
  • Sorry I use the ImageView as Button, but this doesn't matter, so it's just a normal ImageView. – Bashfire Apr 13 '18 at 17:14
  • 2
    Just do `imageView.fitHeightProperty().bind(anchorPane.heightProperty().subtract(30))`? (Replace `30` with whatever you need). Or just wrap the image view in another pane - say a `StackPane` and place the `StackPane` in the `AnchorPane` (then bind to the stack pane's width and height). – James_D Apr 13 '18 at 17:15
0

Only thing work for me. On the view, listen change of the AnchorPane and set ImageView Size

init {
   myAnchorPane.widthProperty().addListener { observable, oldValue, newValue ->
            myImageView.fitWidth = myAnchorPane.width
            myImageView.fitHeight = 0.0
    }
}
Anthone
  • 2,156
  • 21
  • 26
0

See this answer. Basically you can use the ImageViewPane that you can include in your project.

Dexter Legaspi
  • 3,192
  • 1
  • 35
  • 26