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

Результат