JavaFX将旋转应用于CSS中的图像

Question

我想知道是否有办法将某些转换（即旋转）应用于设置为某个按钮的图像。我正在使用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;
}

Answer 1

让我们从一个示例应用程序开始：

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

<强> application.css

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

<强>结果

方法1（找出用于图像的类）

使用调试器（set a breakpoint on println() and check the content of button.graphic.value）可以轻松完成此操作。这里使用的类是ImageView。这意味着可以使用以下方式旋转图像：

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

<强>结果

方法2（为图形对象设置自定义类）

这可以使用ChangeListener来完成：

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

然后可以使用以下内容旋转图像：

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

<强>结果

填充

如果图像占用太多空间，您可能需要为按钮添加额外的填充：

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

<强>结果