javafx绘制线条和文字 [英] javafx drawing lines and text

问题描述

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

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

关于此操作的第一个想法是将街道绘制为线条，然后简单地更改其颜色.但是我不能在行上输入文字(我想要一个带有街道名称的文字).因此，我尝试在StackPane上放置一行和一个文本.然后我在BorderPane中心添加了StackPanes ...但是没有用.似乎StackPane不尊重行的起始x，起始y ...这两行相互重叠.

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.

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

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.

我需要这样的东西: http://img834.imageshack.us/img834/1157/ulicac.jpg 但是街道需要彼此连接...就像第一张图片

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

喜欢:

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

推荐答案

StackPane 默认情况下，您将使用StackPane的所有内容居中，而这并不是您想要的.

The StackPane you were using will by default centre everything in the centre of the StackPane, which won't be what you want.

使用普通的 Pane代替StackPane (如果您需要CSS样式化窗格或在调整窗格大小时需要在窗格中调整控件大小)，否则，请使用

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.

当我画一条线时，我可以指定位置x，y，但是我不能设置文本或标签的位置...或者我可以吗?

when I draw a line I can specify position x,y, but I can't set position of Text or Label... or can I?

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

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.

这篇关于javafx绘制线条和文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！