如何翻转Javafx滑块的轴

Question

我通过修改javafx滑块的css使用javafx创建标尺，并且创建了类似以下内容：

我试图做到这一点：

所以我试图通过调用setRotate()method 来旋转滑块，但是它变成了这样：

这是我的滑块代码：

Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.setRotate(180);

Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.setRotate(180);

这是我的滑块CSS代码：

.slider > .thumb,
.slider > .thumb:hover,
.slider:focused > .thumb{
    -fx-background-color: #ff6a6a;
    -fx-background-insets: 2 0 -23 0;
    -fx-padding: 1 1 0 1;
    -fx-background-radius: 0;
}

.slider:vertical > .thumb,
.slider:vertical > .thumb:hover,
.slider:vertical:focused > .thumb{
    -fx-background-color: #ff6a6a;
    -fx-background-insets: 0 -23 0 2;
    -fx-padding: 1 0 1 1;
    -fx-background-radius: 0;
}

.slider > .track,
.slider:vertical > .track {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0;
}

.slider > .axis {
    -fx-tick-mark-stroke: transparent;
    -fx-tick-label-font-size: 0.833333em;
    -fx-tick-label-fill: #9a9a9a;
    -fx-background-color: #333;
}

请建议我如何翻转轴或旋转这些滑块的标签，以便获得预期的结果。

Answer 1

基本上，您必须设置轴的side属性（左和上）。涉及的步骤：

• 让滑块具有自定义样式，即fi轴上/轴左
• 在CSS中，为包含在此滑块中的轴定义一个规则，以将其侧面设置为上/左

代码：

Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.getStyleClass().add("axis-top");

Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.getStyleClass().add("axis-left");

在CSS中：

.slider.axis-top > .axis  {
    -fx-side: TOP;
}

.slider.axis-left > .axis {
    -fx-side: LEFT;
}

当然可以优化它，但是应该让您入门。