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 に答える