Question

我正在尝试在我的JavaFX应用程序中添加一个包含Slider的组的路径，以便让用户标记与该Slider值关联的对象的某些特征。但是，路径（在这种情况下为垂直线）没有标记在正确的位置。对于较小的值，它在拇指之前，对于较大的值，它在它之后。

double pixelsPerValue = slider.getWidth() / (slider.getMax() - slider.getMin());
double leftAdjust = slider.getLayoutX();
double pathX = leftAdjust + (slider.getValue() * pixelsPerValue);
Path path = PathBuilder.create()
    .elements(
        new MoveTo(pathX, 0)
        , new LineTo(pathX, 25)
        )
    .stroke(Color.CYAN)
    .strokeWidth(3)
    .translateX(0)
    .translateY(27.0)
    .build();

注意两件事：

该集团位于BorderPane底部的HBox;
滑块的最大值由对象数决定用户想要滚动，可以是例如8,617,10,492,6,345 - 你明白了。

知道为什么会这样吗？我该如何解决它？

Answer 1

几个笔记;

您绘制的线条略微滑动，是由左侧引起的边框和滑块线之间的右边距滑块。您可以通过更改double margin值来测试它以下代码。
在此之前，您无法使用slider.getWidth() 阶段显示。请参阅代码中的“之前”和“之后”打印下面。相反，我使用了slider.getPrefWidth()。当然，如果你是在某些事件处理程序中使用getWidth（）然后没问题。
使用绑定更容易控制和编码。在下面的代码中滑动拇指。

公共类SliderDemo扩展了Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        Slider slider = new Slider();
        slider.setStyle("-fx-border-color: green");
        slider.setLayoutX(60);
        slider.setLayoutY(50);
        slider.setMax(200);
        slider.setValue(180);
        slider.setMin(100);
        slider.setPrefWidth(390);

        double margin = 10; // left and right margins between the border and the slider line of the slider

        SimpleDoubleProperty pixelsPerValueProperty = //
                new SimpleDoubleProperty((slider.getPrefWidth() //
                - (2 * margin)) / (slider.getMax() - slider.getMin()));

        SimpleDoubleProperty pathXProperty = new SimpleDoubleProperty();
        pathXProperty.bind(slider.layoutXProperty()//
                .add(margin)//
                .add(pixelsPerValueProperty.multiply(slider.valueProperty().subtract(slider.getMin()))));

        MoveTo moveTo = new MoveTo(0, 0);
        moveTo.xProperty().bind(pathXProperty);
        LineTo lineTo = new LineTo(0, 25);
        lineTo.xProperty().bind(pathXProperty);

        Path path = PathBuilder.create().elements(
                moveTo, lineTo)//
                .stroke(Color.CYAN)//
                .strokeWidth(3)//
                .translateX(0)//
                .translateY(77.0)//
                .build();

        Group group = new Group(slider, path);
        primaryStage.setScene(new Scene(group, 700, 250));
        System.out.println("before slider.getWidth() = " + slider.getWidth());
        primaryStage.show();
        System.out.println("after slider.getWidth() = " + slider.getWidth());
    }
}

Answer 2

private void addMarker() {

       double margin = 7; // left and right margins between the border and the slider line of the slider

        SimpleDoubleProperty pixelsPerValueProperty = new SimpleDoubleProperty( //
                (slider.getPrefWidth() - (2 * margin)) / (slider.getMax() - slider.getMin())); // need preferred width even though called from keystroke handler

        SimpleDoubleProperty pathXProperty = new SimpleDoubleProperty();
        pathXProperty.bind(slider.layoutXProperty()//
                .add(margin)//
                .add(pixelsPerValueProperty.multiply(slider.valueProperty().subtract(slider.getMin())))//
        );

        double currentValue = pathXProperty.doubleValue(); 
        MoveTo moveTo = new MoveTo(0, 0);
        moveTo.setX(currentValue);
        LineTo lineTo = new LineTo(0, 25);
        lineTo.setX(currentValue);

        Path myTick = PathBuilder.create()
            .elements(
                moveTo
                , lineTo
                )
            .stroke(Color.CYAN)
            .strokeWidth(3)
            .translateX(0)     // for path instantiated in FXML = 7.0
            .translateY(27.0)
            .managed(true)
            .build();

        pathGroup.getChildren().add(myTick);

}

相对于滑块值的路径位置未正确设置

2 个答案: