Question

我在JavaFx中绘制线条时遇到问题。我们正在制作一个模拟交通的应用程序 - 有16条街道，每条街道都有不同的颜色取决于交通。有一个非常简单的图片： http://img546.imageshack.us/img546/9949/uliceu.jpg

我对如何做到这一点的第一个想法是将街道画成线条并简单地改变它的颜色。但是我不能在线上放一个文字（我想要一个带有街道名字的文字）。所以我试着在StackPane上放一行和一个文本。然后我在BorderPane中心添加了StackPanes ......但它没有用。看起来像StackPane不尊重线的起始x，开始y ......线条相互重叠。

该应用程序的主要窗格是BorderPane，我想将地图放在中心。它不需要动态调整大小，我们只有一个映射，因此它可以以静态方式定位。

我需要这样的东西： http://img834.imageshack.us/img834/1157/ulicac.jpg 但街道需要相互连接......就像在第一张照片上一样

您对如何做到这一点有什么建议吗？任何提示将不胜感激:)）

就像那样：

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);

Answer 1

默认情况下，您使用的StackPane将所有内容置于StackPane中心，这将不是您想要的。

使用普通Pane而不是StackPane（如果您需要CSS样式窗格，或者在调整窗格大小时调整窗格中的控件），否则请使用Group。当你声明你正在绘制的地图不需要动态调整大小时，那么也许只有一个群组就可以了。

项目放置在组或窗格的子项列表中的顺序将决定项目的呈现顺序。首先添加到列表中的项目将首先呈现，最后添加到列表中的项目将呈现在首先添加的项目之上。因此，您首先将街道线添加到您的窗格或组，然后在街道上添加Text（或Labels）。

另一种选择是使用直接绘制Canvas，但是，对于您的应用程序，在窗格或组中使用场景图对象可能是更好的方法。

使用首先添加所有街道的一个窗格/组，然后是所有街道的所有名称或一个窗格/组，以及所有街道名称的另一个窗格/组。单独的窗格可能不错，因为您可以根据需要通过在街道名称组上设置可见标记来切换街道名称上的可见性。不要将一个组用于街道及其名称，然后尝试将多个街道+街道名称组叠在一起，否则在交叉点处，某些街道名称将被运行在其上方的街道遮挡。

当我绘制一条线时，我可以指定位置x，y，但我无法设置文本或标签的位置......或者我可以吗？

除了通过在线创建时为它们提供坐标来定位线条，您还需要定位文本以使其显示在线条的顶部。您可以使用text.relocate(x, y)方法在给定位置找到文本。

Answer 2

我知道这是一个老线程。但是，我有同样的问题：如何向线条添加标签，以防止移动线条。这段代码适合我：

line = new Line();
line.startXProperty().bind(source.layoutXProperty().add(source.getBoundsInParent().getWidth() / 2.0));
line.startYProperty().bind( source.layoutYProperty().add(source.getBoundsInParent().getHeight() / 2.0));

line.endXProperty().bind( target.layoutXProperty().add( target.getBoundsInParent().getWidth() / 2.0));
line.endYProperty().bind( target.layoutYProperty().add( target.getBoundsInParent().getHeight() / 2.0));


label.layoutXProperty().bind(line.endXProperty().subtract(line.endXProperty().subtract(line.startXProperty()).divide(2)));
label.layoutYProperty().bind(line.endYProperty().subtract(line.endYProperty().subtract(line.startYProperty()).divide(2)));

getChildren().addAll( line, label);

javafx绘制线条和文字

2 个答案: