Как перевернуть ось ползунка javafx - PullRequest
Новая
       15

Как перевернуть ось ползунка javafx

0 голосов
/ 21 декабря 2018

Я создаю линейки, используя 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;
}

Подскажите, пожалуйста, как мне перевернуть оси или повернуть метки этих ползунков, чтобы я мог достичь ожидаемых результатов.

1 Ответ

0 голосов
/ 21 декабря 2018

По сути, вы должны установить свойство стороны оси (для левой и верхней).Используемые шаги:

  • пусть ползунок имеет собственный стиль, 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;
}

Это, безусловно, можно оптимизировать, но следуетНачните.

...