Adding Shapes to GridPane results in wrong Position - javafx

I got the task to draw some points on a map. Wrote some code but currently every point I create via shapes will be added to the wrong position inside of my gridpane. Oh and I'm using JavaFX.
I added an imageView to the index 0,0 of my GridPane and every point is created through x and y position of the MouseEvent on the imageView.
After that I added the created point as a child of the GridPane and it's displayed at the center of the y-axis of the first grid.
Tried different things like anchorPanes and canvas but can't seem to get it working.
Code of my View:
http://pastebin.com/dCb7EN4d
Code of my Main:
http://pastebin.com/vp5tzxkG
I hope that's enough ^^'
pls help!
Greetings,
Ben

GridPane is a managed layout: it will position nodes that are added to it via the properties you set (using defaults if you don't set them). So when you add your circles to the grid pane, since you don't set any properties, it will place it in cell (0,0) and align it within that cell using default settings; i.e. it ignores the centerX and centerY properties.
What you should really do here is use a layout that does not manage the positioning of the nodes for you, such as a Pane (or possibly a Group). You can put the ImageView and the Circles in the pane, and then place the pane in the rest of your layout (in the scroll pane, I think).
The other option you have is to call setManaged(false) on the nodes you add to the GridPane in order to instruct the GridPane not to position them, though this feels like more of a workaround.

Related

fit QGraphicsScene to QGraphicsView

I'm trying to draw a stacked bar graph on Qt, i followed the tutorial on the documentation but when i try to put the graph inside a QGraphicsView i get a lo of unused space and can't manage to make the scene fit the view.
My code is the same as the documentation one plus the following to make the scene show up in the view:
QGraphicsScene *scene = new QGraphicsScene(this);
scene->addWidget(chartView);
ui->view->setScene(scene);
And what i get is this
As you can see there is a lot of unused space and it makes the text disappear, i wanted to make the graph fit the view but i can't seem to find a way to do so.
I tried in many different ways using
ui->view->ensureVisible ( scene->sceneRect() );
ui->view->fitInView( scene->sceneRect(),Qt::KeepAspectRatio);
and
ui->view->setSceneRect(0,0,ui->view->frameSize().width(),ui->view->frameSize().height());
but nothing seems to work (the second solution just moves the graph to the top left)
As per the comment... the real issue is the basic sizing of chartView rather than anything to do with QGraphicsView or QGraphicsScene.
When a QWidget is added to a QGraphicsScene the resulting QGraphicsProxyWidget will generally honour the size hint and policy of that widget.
In addition, though, the QGraphicsScene will set the scene rect to the bounding rectangle of all scene items and the QGraphicsView will then position the scene according to whatever viewport anchor is in force. The end result can be visually misleading if the scene has a complex set of items or has a bounding rectangle smaller than that displayed within the GraphicsView.
So if a widget does look odd when added to a QGraphicsScene it's normally a good idea to test by just showing it as a top level window on the desktop and make sure it behaves as expected before going any further.

Drawing node on top of the others in HBox

I am looking for a way to draw a node on top of the neighbouring ones in a HBox. Default behaviour means it is drawn on top of the previous one, but that also means the next one is drawn on top of it. For other containers, one could use the Node.toFront(), but changing the position of the node in the list containing a HBox's children also changes the actual position in the HBox, which is unwanted behaviour in my case. I appreciate any help, thank you.
EDIT:
The overlapping occurs when applying a DropShadow effect on an Ellipse and wrapping them in a StackPane along with a Text. It looks like the effect has a weird interaction with the HBox, as it works as intended without it. After adding the effect, it allocates more horizontal space for the ellipse, but not enough to cover the margins of the effect. Also, when clicking anywhere in the whole right half of the black rectangle, the mouse click is dispatched to the stackPane event handler, not to the rectangle's.
This happens
In VBox and HBox, the Node.toFront() and Node.toBack() functions will change the layout, so they are not usable. If you are using JavaFX 9+,you can use the viewOrder commands to change the rendering order of the Node in its Parent:
Node.getViewOrder()
Node.setViewOrder()
The default value of viewOrder is 0, so setting it to -1 will render it above all others. You can customize this to get specific orders. It also has a CSS property -fx-view-order.

JavaFX Scenebuilder moving elements inside StackPane

I am trying to move things such as buttons and labels that I put inside a StackPane since I want these things to stay centered when minimizing or maximizing windows. When I put everything I want into the StackPane, they all get centered and layered up on each other. How am I able to move these elements around in the StackPane if it's possible or how will I be able to keep everything centered when resizing the window?
You edit their TranslateX and TranslateY properties. for instance
Label label1 = new Label();
label1.setText("0");
label1.TranslateX(-10.0); //<< moves the label 10 pixels to the left.
if you are using Scene Builder you can edit these properties on the right under the "layout" tab.

JavaFX: How to position a component/node?

In JavaFX, is there something similar to setLayout(); or setBounds();?
For example, I want to position a button to a position that I desire.
Everything on JavaFX scene graph is a Node. Each node has a X-coordinate and a Y-coordinate. But there are different ways to set/change position of a child component. It depends on the layout manager used to show the component on the scene graph.
There are layout managers, like Group, which do not compute child's default position and you can use layoutX and layoutY directly on them
There are other layout managers, like Region, which automatically compute child's default position using layoutX and inorder to adjust the locations of the components from their default positions you need to use translateX and translateY values.
From the docs :
If the node is managed and has a Region as its parent, then the layout region will set layoutX according to its own layout policy. If the node is unmanaged or parented by a Group, then the application may set layoutX directly to position it.
You should read up on the Node class (the long text at the beginning), and then especially relocate, setLayoutX (and Y) and setTranslateX (and Y).
In addition to what others already mentioned, if you could place your button (or any node for that matter) inside a StackPane, then you could make use of the StackPane's alignment property that takes javafx.geometry.Pos (the alignment of the child within the StackPane). For example in your case:
<StackPane>
<Button translateY="-15" translateX="15" StackPane.alignment="TOP_RIGHT"/>
</StackPane>

JavaFX - StackPane X, Y coordinates

I'm using StackPanel as container for my figures, panels, etc. What I discovered, that coordinates X,Y (0,0) are placed right in center of my panel.
Is it possible to move it to left top od Pane ?
Calculating all dimensions from center is much more difficult.
You can set the layout of Nodes added to the StackPane to a position within the Stackpane using the StackPane.setAlignment(node, position) method:
Label topLeftLabel = new Label("Top Left");
StackPane stack = new StackPane();
stack.getChildren().add(topLeftLabel);
StackPane.setAlignment(topLeftLabel, Pos.TOP_LEFT);
Even though this is possible, from your brief description of how you are trying to use the StackPane, it sounds like you would be better off using a regular Pane, or a Group or an AnchorPane for the kind of absolute positioning you appear to be wanting to achieve.
Possibly look into using a visual tool such as SceneBuilder as well. Even if you don't end up using the FXML it outputs, SceneBuilder should give you a much better idea of how JavaFX layout mechanisms work. SceneBuilder makes use of AnchorPane as its default layout pane used to provide absolute positioning for elements (which seems to be what you want to achieve).
The previous answer is of course the best in this situation, but it is also wise to know that you can move Nodes on the StackPane using Translation.
Ex.
Label topLeftLabel = new Label("Top Left");
StackPane stack = new StackPane();
stack.getChildren().add(topLeftLabel);
topLeftLabel.setTranslateX(stack.getWidth()/2);
topLeftLabel.setTranslateY(stack.getHeight()/2);
It would do the same thing (but may look a bit worse)

Resources