【问题标题】：JavaFX apply rotate to an image from CSSJavaFX 将旋转应用于 CSS 中的图像
【发布时间】：2016-11-06 13:52:19
【问题描述】：

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

【问题讨论】：

标签： javafx javafx-8 javafx-css

【解决方案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);
}

结果

方法一（找出图片使用的类）

这可以使用调试器 (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;
}

结果

【讨论】：

您能否进一步解释一下您是如何使用调试器来找出正确的类名的？
@rvit34 添加了简短的解释和截图。
@rvit34 ScenicView 也是一个用于自省组件和布局的有用工具。它还将显示组件的 CSS 样式类信息。