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

结果

方法二(为图形对象设置自定义类)

这可以使用 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;
}

结果