如何在JavaFX Slider上绘制垂直线条

时间:2018-01-08 19:35:06

标签: javafx graphics slider

我在JavaFX中有一个交互式图表,使用线图和一个滑块来表示随时间变化的图表值。用户移动滑块并在图表上移动光标。我想通过将图表和包含一行的窗格添加到堆栈窗格并更新该行相对于图表的位置,找到了如何将光标线添加到折线图。

现在我想在滑块上绘制一些垂直线,以指定特定间隔的感兴趣区域。但是我的滑块上没有刻度线,所以我无法查找轴以获得任何位置。

我也不知道会有多少感兴趣的区域所以我试图在滑块最初绘制后绘制线条并且我不确定它是否会起作用。我尝试将滑块和画布添加到堆栈窗格,然后检索画布的2d图形上下文并使用strokeline,但没有显示任何内容。我不确定该尝试什么。

基本上我想知道是否有办法在任何位置在滑块顶部绘制多条垂直线,以及如果关闭刻度线并且我们无法访问轴,如何根据滑块值检索图形位置属性。

编辑:我想出了如何在图表上画线,但现在我无法得到正确的位置。我所做的是将滑块和另一个透明窗格添加到堆栈窗格,然后在透明窗格上添加了一行。但是我无法使用轴getDisplayPosition在正确的位置绘制。

如果我这样做:

jSlider.setValue(14);
NumberAxis axis = (NumberAxis) jSlider.lookup(".axis");
Bounds bounds = axis.localToScene(axis.getBoundsInLocal());

double x = axis.getDisplayPosition(14);
x += axis.getLayoutX() + bounds.getMinX();

line = new Line(x,0,x,100);
line.getStyleClass().clear();
line.getStyleClass().add("multi_graph_scribe");
glassPane.getChildren().add(line);
if(!line.isVisible())
    line.setVisible(true);

incorrect placement using axis display position of value

我最后在错误的位置找到滑块,请看我的第一个截图。如果我画一条拇指所在的线,它会在正确的位置结束,但当然我不想预先定位滑块以绘制这些线。我觉得我错过了轴的位置,即使我试图通过设置边界到本地来解释它。但即便如此,我也不确定,因为我试图将显示位置的值设为20并且该线移动但它不会移动6个价值的房地产。

jSlider.setValue(14);
NumberAxis axis = (NumberAxis) jSlider.lookup(".axis");
Bounds bounds = axis.localToScene(axis.getBoundsInLocal());

double x = axis.getDisplayPosition(14);
x += axis.getLayoutX() + bounds.getMinX();

StackPane p = (StackPane)jSlider.lookup(".thumb");
x = p.getLayoutX() +( p.getWidth() /2);


line = new Line(x,0,x,100);
line.getStyleClass().clear();
line.getStyleClass().add("multi_graph_scribe");
glassPane.getChildren().add(line);
if(!line.isVisible())
    line.setVisible(true);

correct placement using thumb position

0 个答案:

没有答案