2

いくつかのボタンに設定された画像にいくつかの変換（回転など）を適用する方法があるかどうか疑問に思っています。css を使用してすべての画像を次のように指定しています。

.custom-button {
   -fx-graphic: url("imgs/buttons/button.png");
   ...
}

.custom-button:hover {
   -fx-graphic: url("imgs/buttons/button_hover.png");
   ...
}

.custom-button:selected {
   -fx-graphic: url("imgs/buttons/button_selected.png");
   ...
}

ここでもcssでそのような変換を指定したいと思います。どうすればそれを達成できますか？私は次のようなものを見つけることを想定しています:

.custom-button .graphic {
   -fx-rotate: 90;
}
4

1 に答える 1

7

サンプル アプリケーションから始めましょう。

Main.java

package application;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Button");
        VBox vBox = new VBox(button);
        vBox.setPadding(new Insets(10.0));
        Scene scene = new Scene(vBox, 200, 100);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
        System.out.println();
    }

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

アプリケーション.css

.button {
    -fx-graphic: url(image.png);
}

結果

画像1

方法 1 (画像に使用されているクラスを調べる)

これは、デバッガーを使用して簡単に実行できます ( println()にブレークポイントを設定し、 button.graphic.valueの内容を確認します)。ここで使用されるクラスはImageViewです。これは、次を使用して画像を回転できることを意味します。

.button .image-view {
    -fx-rotate: 45;
}

結果

画像2

方法 2 (グラフィック オブジェクトのカスタム クラスを設定する)

これは、ChangeListener を使用して実行できます。

button.graphicProperty().addListener((ChangeListener<Node>) (observable, oldValue, newValue) -> {
    newValue.getStyleClass().add("my-class");
});

次に、以下を使用して画像を回転できます。

.my-class {
    -fx-rotate: 45;
}

結果

画像2

パディング

画像が占めるスペースが大きすぎる場合は、ボタンに追加のパディングを追加する必要がある場合があります。

.button {
    -fx-graphic: url(image.png);
    -fx-graphic-text-gap: 10;
    -fx-label-padding: 5 0 5 5;
}

結果

画像3

于 2016-11-07T16:33:23.500 に答える