JavaFX - Создать кнопку из значка - PullRequest
Новая
       40

JavaFX - Создать кнопку из значка

0 голосов
/ 02 июня 2018

Недавно я занимался пользовательскими элементами управления с JavaFX и задавался вопросом, как лучше всего создать кнопку, которая просто является изображением.Например, здесь, в Stack Overflow, у нас есть эти кнопки (я полагаю, что на самом деле это ссылки, но я хочу того же эффекта в JavaFX), которые совсем не похожи на кнопки.

enter image description here

Каков наилучший способ создания чего-то похожего в JavaFX?Я знаю, что вы можете добавлять изображения к кнопкам, но есть ли способ полностью удалить фон (я подозреваю, что он есть)?

Ответы [ 2 ]

0 голосов
/ 02 июня 2018

Я использую пользовательский класс ImageButton в своих проектах.Это похоже на подход Фабиана, но использует ImageView.Это также немного проще для реализации, на мой взгляд. 

public class ImageButton extends Button {

    private final String STYLE_NORMAL = "-fx-background-color: transparent; -fx-padding: 2, 2, 2, 2;";
    private final String STYLE_PRESSED = "-fx-background-color: transparent; -fx-padding: 3 1 1 3;";

    public ImageButton(Image originalImage, double h, double w) {

        ImageView image = new ImageView(originalImage);
        image.setFitHeight(h);
        image.setFitHeight(w);
        image.setPreserveRatio(true);
        setGraphic(image);
        setStyle(STYLE_NORMAL);

        setOnMousePressed(event -> setStyle(STYLE_PRESSED));
        setOnMouseReleased(event -> setStyle(STYLE_NORMAL));
    }

}

Тогда вам просто нужно передать ему Image и размеры: 

ImageButton newButton = new ImageButton(new Image("icon.png"), 16, 16);
0 голосов
/ 02 июня 2018

Просто установите свойство graphic кнопки соответствующим образом.

Поскольку stackoverflow использует пути svg, в следующем примере используется SVGPath, но его можно легко изменить на ImageView, и масштабирование можетзаменен на настройку fitWidth / fitHeight.Однако если вы хотите использовать ImageView, вам следует учитывать тот факт, что ImageView не предоставляет свойства fill, и вам нужно работать с непрозрачностью или с другими изображениями. 

public static Button createIconButton(String svg) {
    SVGPath path = new SVGPath();
    path.setContent(svg);
    Bounds bounds = path.getBoundsInLocal();

    // scale to size 20x20 (max)
    double scaleFactor = 20 / Math.max(bounds.getWidth(), bounds.getHeight());
    path.setScaleX(scaleFactor);
    path.setScaleY(scaleFactor);
    path.getStyleClass().add("button-icon");

    Button button = new Button();
    button.setPickOnBounds(true); // make sure transparent parts of the button register clicks too
    button.setGraphic(path);
    button.setAlignment(Pos.CENTER);
    button.getStyleClass().add("icon-button");

    return button;
}

@Override
public void start(Stage primaryStage) {
    // the following svg paths were copied from the stackoverflow website
    HBox root = new HBox(
            createIconButton("M15.19 1H4.63c-.85 0-1.6.54-1.85 1.35L0 10.79V15c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2v-4.21l-2.87-8.44A2 2 0 0 0 15.19 1zm-.28 10l-2 2h-6l-2-2H1.96L4.4 3.68A1 1 0 0 1 5.35 3h9.12a1 1 0 0 1 .95.68L17.86 11h-2.95z"),
            createIconButton("M15 2V1H3v1H0v4c0 1.6 1.4 3 3 3v1c.4 1.5 3 2.6 5 3v2H5s-1 1.5-1 2h10c0-.4-1-2-1-2h-3v-2c2-.4 4.6-1.5 5-3V9c1.6-.2 3-1.4 3-3V2h-3zM3 7c-.5 0-1-.5-1-1V4h1v3zm8.4 2.5L9 8 6.6 9.4l1-2.7L5 5h3l1-2.7L10 5h2.8l-2.3 1.8 1 2.7h-.1zM16 6c0 .5-.5 1-1 1V4h1v2z"));

    Scene scene = new Scene(root);
    scene.getStylesheets().add("style.css");
    primaryStage.setScene(scene);
    primaryStage.show();
}

style.css 

/* set default fill of svg path */
.icon-button .button-icon {
    -fx-fill: #888888;
}

/* set default fill of svg path */
.icon-button:focused {
    -fx-background-color: lightblue;
    -fx-background-radius: 0;
}

/* remove default button style & set size */
.icon-button {
    -fx-background-color: transparent, transparent, transparent, transparent, transparent;
    -fx-pref-height: 30;
    -fx-pref-width: 30;
    -fx-min-height: 30;
    -fx-min-width: 30;
    -fx-max-height: 30;
    -fx-max-width: 30;
}

/* modify svg path fill for hovered/pressed button */
.icon-button:pressed .button-icon,
.icon-button:hover .button-icon {
    -fx-fill: #444444;
}
...