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

结果

方法一（找出哪个class用于图像）

这可以使用调试器轻松完成（set a breakpoint on println() and check the content of button.graphic.value). The class which is used here is ImageView。这意味着可以使用以下方法旋转图像：

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

结果

方法二（为图形对象设置自定义class）

这可以使用 ChangeListener 来完成：

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

然后可以用下面的方法来旋转图片：

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

结果

填充

如果图像占用太多，您可能需要向按钮添加额外的填充 space:

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

结果

JavaFX 将旋转应用于来自 CSS 的图像

JavaFX apply rotate to an image from CSS

javafx

javafx-8

javafx-css

方法一（找出哪个class用于图像）

方法二（为图形对象设置自定义class）

填充