I’ve got a problem with drawing lines in JavaFx. We’re making an application simulating traffic – there are 16 streets, and every street has a different color dependent on traffic. There is a very simple picture:
http://img546.imageshack.us/img546/9949/uliceu.jpg
My first idea on how to do this was to draw streets as lines and simply change its colors. But I cant put a text on the line (I want a text with a street name). So I tried to put a line and a text on the StackPane. Then I added that StackPanes on BorderPane center… But it didnt work. Seems like StackPane doesn’t respect line’s start x, start y… The lines overlapped each other.
Main pane of the app is BorderPane and I want to put a map on center. It doesn’t need to be resized dynamically, we have only one map so It can be positioned in static way.
I need something like that:
http://img834.imageshack.us/img834/1157/ulicac.jpg
But streets need to connect to each other… like on the first picture
Have you any suggestions on how to do that?
Any tips would be appreciated 🙂
Like that:
Group gr = new Group();
Text text = new Text("1st Street");
text.setFill(Color.web("fabbff"));
Line line = new Line(0, 150, 200,150);
line.setStrokeWidth(20);
line.setStroke(Color.web("000000"));
gr.getChildren().addAll(line, text);
group.getChildren().addAll(gr, //and every other street);
The StackPane you were using will by default centre everything in the centre of the StackPane, which won’t be what you want.
Instead of a StackPane, use a plain Pane (if you need to CSS style the pane or have controls in the Pane resize when you resize the Pane), otherwise, use a Group. As you state that the map you are drawing doesn’t need to be resized dynamically, then perhaps just a Group is fine.
The order in which items are placed inside the group or pane’s children list will determine the order in which items are rendered. Items added first to the list will be rendered first and items added last to the list will be rendered on top of the items added first. So you add Street lines to your Pane or Group first, and then add Text (or Labels) on top of the streets.
Another option is to use a direct draw Canvas, but, for your application, using scene graph objects in a Pane or Group is probably a better approach.
Use either one Pane/Group with all of the streets added first, followed by all of the names or one Pane/Group for all streets and another for all street names. Separate panes might be nice because you could toggle visibility on the street names as needed by setting a visible flag on the street name group. Don’t use one group for both a street and its name, then try to layer multiple street+streetname groups on top of each other, otherwise at the intersections some of the street names will be obscured by streets running on the top of them.
In addition to positioning lines by providing coordinates to them at line creation, you also need to position the text so that it will be displayed on top of the lines. You can use the text.relocate(x, y) method to locate the text at a given location.