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());
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.
Scene Tree:
https://gyazo.com/45e0daebbfd98dfd3446185d21eb91ee
Values:
Top gridpane:
https://gyazo.com/f48ebb39f48d876a02d44792a73eaad4
lower level gridpane:
https://gyazo.com/3399d9f3ab00e8babd36ee3b0e3b27ba
BorderPane:
https://gyazo.com/51c24f8de50ae3865a299fdddf3a1490
ImageView:
https://gyazo.com/7dfc1071d2b516a83baed301596be2b9
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.
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());
Related
Link to screenshots: https://imgur.com/a/uSpTG8I
First image is when the window is expanded, second one is when the program runs. The others is of the FXML file and the scenebuilder program.
I have looked this up and tried the various layout options in the scenebuilder program itself but none of them works as I wanted. I want the image to stay centered, and if possible, the arrow buttons to also be centered.
Thanks
I'm a fan of BorderPanes. If you wrap your arrows to the Center of the BorderPane they will stay centerd, even if you resize your Scene.
So if You want the arrows and the big Image Centered use a BorderPane and wrap the Image to the Center. Now you can wrap another BorderPane in parent BorderPane's Bottom and wrap your Arrows to center.
I have an ImageView wrapped in a StackPane that is added to the top section of a SplitPane. When I move the SplitPane's divider, I want the ImageView to resize to fit the allotted space, while also preserving the ImageView's size ratio. I have attempted to achieve this with the following code snippet:
Platform.runLater(() -> {
image.fitHeightProperty().bind(stackpane.heightProperty());
image.fitWidthProperty().bind(stackpane.widthProperty());
image.setPreserveRatio(true);
});
The problem with this however is that the ImageView will only grow, but not shrink. How can I fix this?
Mystery solved! Playing with the SplitPane's divider bindings seemed to be the solution. It isn't perfect, as sometimes the image is not flush with either top/bottom nor left/right edges depending on the width/height of the Stage, but it gets the job done.
Platform.runLater(() -> {
image.fitWidthProperty().bind(splitPane.getDividers().get(0).positionProperty().multiply(splitPane.widthProperty()));
image.fitHeightProperty().bind(splitPane.getDividers().get(0).positionProperty().multiply(splitPane.heightProperty()));
imgWebCamCapturedImage.setPreserveRatio(true);
});
I want to create buttons in the corners of the screen for the controls of my game.
It used to work with just creating a skin, adding that skin to a new ImageButton(skin) and setting the size and position of that button to what is desired. I now use box2d and if i now set the size of the button to (1, 1) the height is correct but the width is always about 2/3 of the screen, no matter what i change it to.
I tried using a table and doing this:
table = new Table();
table.setFillParent(true);
stage.addActor(table);
table.setDebug(true);
table.add(boostButtonn).width(1).height(1).bottom().right();
But I have no clue how to draw it in the corner of the screen, also the button is drawn in the middle of the screen with the correct size using this table, but the skin is stretched out of the button. Viewport width and height are 40,24 respectively
My skin and button code:
Skin skin = new Skin(Gdx.files.internal("skin/flath-earth-ui.json"));
Button bootsButton = new ImageButton(skin);
And then i add it to the table
Problem is not in how you align or arrange your widget. Problem is why button/widget or even text is stretched and looks blurry.
Why stretched ?
Problem is in your resources. Your resources should be compatible with your viewport. If you're using small viewport then we need your resources(images and fonts) in small size.
You're using skin, that used to create Widget.
Skin depends on .json file that contains information about your Widget object and .atlas files having information of your image file.
You're using 40 as width of viewport then button image that used as drawable should be in range of approx. 10.
So what is solution now :
If you already have all resources ready then use some higher viewport dimension according to your resources else create create resources according to viewport.
So I have this FXML code here (generated via SceneBuilder):
http://pastebin.com/0mjBh9s7
The problem is that I want the content inside the GridPane to scale horizontally according to the horizontal size of the Scroll Pane, but the scaling does not work.
Any solution to this problem?
You do not scale anything in that fxml, nor does scaling work, since it does not influence the layoutBounds property that ScrollPane uses to determine the size of the content.
For this reason you'd need to wrap the GridPane in a Group for the ScrollPane to see the size of GridPane including scale transformations.
If you do not want to scale the content, but simply resize it to the viewport size of the ScrollPane, setting the fitToWidth property to true would be the appropriate way to handle this.
I have a layout where I have a vertical split pane that divides two components. The component inside the right side of the splitpane I want to grow (it's an image), but the components on the left side of the split pane I want to remain in the exact same place with the divider in the exact same position when the window is enlarged.
I have attempted to wrap the left side AnchorPane in a Vbox and it seemed to work except when the window is resized all of the components in the left side get moved down. This also occurs when I wrap it in an HBox.
I can't think of the best way to fix this. I'm using scene builder and I'm still fairly new to Javafx. Can anyone help?
Thank you!
Calling setMinWidth and setMaxWidth on the component that must not grow with the same fixed value will prevent the user to change the divider position.
So for example let's say that you want a max size of 100 for your left component, the code could be:
SplitPane pane = new SplitPane();
double leftComponentSize = 100.0;
VBox leftComponent = new VBox();
// Set the min and max width to a fixed size
leftComponent.setMinWidth(leftComponentSize);
leftComponent.setMaxWidth(leftComponentSize);
...
pane.getItems().addAll(leftComponent, rightComponent);
// Initialize the divider positions to allocate the expected size
// to the left component according to the size of the window
pane.setDividerPositions(leftComponentSize / stage.getScene().getWidth());