JavaFX - 从图标创建按钮

Question

我最近一直在使用 JavaFX 进行自定义控件，并且想知道创建一个简单的图像按钮的最佳方法是什么。例如，在 Stack Overflow 上，我们有这些按钮（我想实际上它们是链接，但我希望在 JavaFX 中具有相同的效果），它们看起来根本不像按钮。

在 JavaFX 中创建类似内容的最佳方法是什么？我知道您可以向按钮添加图像，但是否还有一种方法可以完全删除背景（我怀疑有）？

Answer 1

只需相应地设置graphic按钮的属性即可。

由于 stackoverflow 使用 svg 路径，因此以下示例使用SVGPath，但它可以轻松更改为 an ，并且可以使用设置/ImageView替换缩放。如果您确实想使用，您应该意识到它不提供属性，您需要使用不透明度或不同的图像来代替。fitWidthfitHeightImageViewImageViewfill

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

样式.css

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

Answer 2

我ImageButton在我的项目中使用自定义类。这类似于 fabian 的方法，但使用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);