i have a problem with the Translate Transitions. I have a GridPane 7x7. In each cell there is a StackPane. Each StackPane has 3 ImageViews. If i want to change the position of the last added ImageView with a Translate Transition it moves but it moves under the other ImageViews. What do i have to do to keep it up top while the animation is running? It actually stays above if the animation goes up or left but not down and right.
TranslateTransition translate = new TranslateTransition(new Duration(animation_duration));
translate.setToX(100);
translate.setByY(100);
translate.setNode(players[old_x][old_y]);
translate.play();
Thanks
Related
Can you please tell me, how can I make a pane scrollable? I am able to make an image scrollable, like this:
VBox root = new VBox();
ScrollPane sp = new ScrollPane();
sp.setContent(new ImageView(new Image(getClass().getResourceAsStream("test.png"))));
root.getChildren().add(sp);
But when I am trying to make a whole pane scrollable, which consists of some Buttons and a small animation, there happens nothing regarding scrollbars. There are no scrollbars. How can I solve that?
Thank you in advance.
I tried to do it by myself, and it is because your scroll pane has fixed width and height, by resizing window, your scroll pane doesn't resize on itself. You can use anchor pane so scroll pane will resize with anchor pane. You could do something like this:
ImageView image = new ImageView(new Image("wp1951596.jpg"));
ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(image);
scrollPane.setPrefSize(400, 400);
AnchorPane.setTopAnchor(scrollPane, 0.);
AnchorPane.setRightAnchor(scrollPane, 0.);
AnchorPane.setBottomAnchor(scrollPane, 0.);
AnchorPane.setLeftAnchor(scrollPane, 0.);
rootPane.getChildren().add(scrollPane);
I would also recommend you using JavaFX with .fxml files. Then you can create your layout in SceneBuilder and it will make everything easier and faster.
I'm making this UI where an image map is displayed, wrapped into an anchor pane, itself wrapped into a scrollpane. I want to add an overlay at the bottom left corner, showing coordinates. This overlay must of course be visible even when resizing my view and scrolling my map left and right.
I tried to use constraints with the anchorpane but the coordinates field disappears when scrolling the map rightward.
Here you can see a view of my hierarchy and the position I want the field to remain :
scene builder view
Thx for your answers.
SplitPane
└AnchorPane
├ScrollPane
│ └...
└Label(etc)
To overlap the label, I recommend the above construction. This is because the label is out of the viewport, making the viewport zoom and transform easier.
Considering a case horizontal ScrollBar is invisible, LayoutY of the label should be compute using binding.
// These can be set in Scene Builder
anchorPane.getChildren().addAll(scrollPane, label);
AnchorPane.setTopAnchor(scrollPane, 0.0);
AnchorPane.setLeftAnchor(scrollPane, 0.0);
AnchorPane.setRightAnchor(scrollPane, 0.0);
AnchorPane.setBottomAnchor(scrollPane, 0.0);
AnchorPane.setLeftAnchor(label, 0.0);
// Bind LayoutY of Label
DoubleBinding labelLayoutYBinding = Bindings.createDoubleBinding(
() -> scrollPane.getViewportBounds().getHeight() - label.getHeight(),
label.heightProperty(),
scrollPane.viewportBoundsProperty());
labelLayoutYBinding.addListener((o, ov, nv) -> label.setLayoutY(nv.doubleValue()));
If the horizontal ScrollBar is always displayed in your application, setting fixed bottom offset in Scene Builder is easier rather than using the binding.
// This can be set in Scene Builder
AnchorPane.setBottomAnchor(label, 13.0); // Set the fixed value to ease up
Can someone please explain me why this strange behaviour exists? When I have a group in a vbox every item in a child appears to modify the siblings to.
Following strange behaviour happens:
everything normal here
here too everything normal
whoops, why did the searchbar move???
First of the structure of the application I have:
root (VBox) //vbox so the menubar has its own space
├───menubar (MenuBar)
└───contentroot (Group)
├───searchbar (TextField) //searchbar should always be on the top left
└───nodeRoot (Group)
├───circle1 (Nodes)
└───circle2 (Nodes)
The root is a vbox so the menubar has its own unchallenged space. The searchbar should always be top left, directly under the menubar.
The nodeRoot should contain every other node. Kinda like a drawing board which I should be able to drag around.
Code:
public void start(Stage primaryStage) throws Exception{
VBox root = new VBox();
MenuBar menuBar = new MenuBar(new Menu("File"));
Group contentRoot = new Group();
contentRoot.getChildren().add(new TextField("SearchBar"));
Group nodeRoot = new Group();
contentRoot.getChildren().add(nodeRoot);
root.getChildren().addAll(menuBar, contentRoot);
Circle circle = new Circle(30, Color.RED);
nodeRoot.getChildren().add(circle);
Scene scene = new Scene(root, 300, 275);
primaryStage.setScene(scene);
primaryStage.show();
scene.setOnMousePressed(event -> {
circle.setTranslateX(event.getSceneX() - 15);
circle.setTranslateY(event.getSceneY() - 15);
});
}
My guess why this happens:
The problem started to appear after I added the menubar and put everything into a VBox. This is when the siblings of the nodeRoot get changed too. My guess is that because VBox is a Region the behaviour is different than a normal group which expands. But then I dont understand why it only happens if the item moves to the left or top.
Can somebody please explain why this happens and how I can fix it?
From the javadocs for Group:
A Group will take on the collective bounds of its children and is not
directly resizable.
When you click near the top or left of the scene, the circle's bounds include negative values. Since the group takes on those bounds, it also takes on negative values. The TextField never has any layout bounds set, so the Group positions it at (0,0). Hence the text field can end up below or to the right of the circle. The vbox positions the group in order to try and contain it entirely, so it shifts it right if it contains negative x-value bounds and down if it contains negative y-value bounds.
If you use a Pane to contain the circle, instead of a Group:
Pane contentRoot = new Pane();
it behaves more intuitively: the Pane does not take on the union of the bounds of its child nodes, so if the circle has negative bounds, it just moves left and/or above the pane's visible area.
Background
I am trying to build a image gallery based on the description here.
I have a StackPane, with ScrollPane and AnchorPane as its children, added in the same order.
ScrollPane contains a list of images contained in ImageView's, while the Anchorpane has two buttons, anchored to the left and right corners, to scroll the images !
Problem
The scrolling is working fine, as the buttons are placed on the AnchorPane, which is the top child on the StackPane.
I want to implement the double-click on the imageView to open it in fullscreen. Since the imageView is a child of ScrollPane, it is not able to listen to the mouse event.
Is there a way through which I can make the ImageView listen to the mouseEvent ?
Instead of placing the AnchorPane and ScrollPane in a StackPane, try using the AnchorPane as the root of this structure. Add the ScrollPane to it first with appropriate anchors and then add the buttons. That way the buttons will still be on top, but there will be nothing interfering with the mouse events on the content of the scroll pane.
ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(...);
// scrollPane fills entire anchor pane:
AnchorPane.setLeftAnchor(scrollPane, 0.0);
AnchorPane.setRightAnchor(scrollPane, 0.0);
AnchorPane.setTopAnchor(scrollPane, 0.0);
AnchorPane.setBottomAnchor(scrollPane, 0.0);
Button button1 = new Button(...);
Button button2 = new Button(...);
// button1 in top left:
AnchorPane.setTopAnchor(button1, 0.0);
AnchorPane.setLeftAnchor(button1, 0.0);
// button2 in top right:
AnchorPane.setTopAnchor(button2, 0.0);
AnchorPane.setRightAnchor(button2, 0.0);
AnchorPane anchorPane = new AnchorPane();
anchorPane.getChildren().addAll(scrollPane, button1, button2);
I'm creating an JavaFX Game like "Wheel of Fortune". I use a BorderPane as root of the scene. and the right of this pane is set to contain a GridPane which in turn contain an ImageView and some other elements. I want to set the position of the ImageView (the wheel) so that only half of it is displayed. I've setLayoutX and setLayoutY to set the position of ImageView with x = X of GridPane + ImageView. X /2 (something like that), but the ImageView is not placed as expected. How should I do that???
ImageView http://imageshack.com/a/img812/6161/ynb8.png