4

我通过修改 javafx 滑块的 css 来使用 javafx 创建标尺，我创建了这样的东西：

我试图做到这一点：

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

这是我的滑块代码：

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

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

4

1 回答 1

5

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

  • 让滑块有自定义样式，fi axis-top/axis-left
  • 在 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;
}

这当然可以优化，但应该让你开始。

于 2018-12-21T11:06:28.077 回答