JavaFX - 从图标创建按钮

Question

最近我一直在研究JavaFX中的自定义控件，想知道创建一个简单的图片按钮的最佳方式是什么。例如，在Stack Overflow上，我们有这些按钮（我想实际上它们是链接，但我想在JavaFX中获得相同的效果），它们看起来根本不像按钮。

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

- Ivar Eriksson

---

请看：https://dev59.com/npXfa4cB1Zd3GeqPm_oz - JKostikiadis

在我看来，使用按钮并不是最好的方法。你可以使用超链接，但我建议使用带有监听器的ImageView，因为我觉得这样更节省内存。 - JKostikiadis

Answer 1

只需相应地设置按钮的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;
}

- fabian

---

该实现仍然包括按钮边框，因此它看起来像一个标准的按钮，而不仅仅是一个可点击的图像。 - Zephyr

@Zephyr 如果按钮被聚焦，它会显示按钮的背景。如果这不是您想要的效果，您可以轻松地从 CSS 样式表中删除此规则。由于标准按钮通过组合背景实现，因此边框已被移除。 - fabian

啊，抱歉；我在测试中加载style.css时遇到了问题。 - Zephyr

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

- Zephyr

Answer 3

尽管这是一篇旧帖子，但对于使用SceneBuilder的人来说，了解您可以使用Button和ImageView来完成此操作仍然很好：

（我正在使用Gluon SceneBuilder）

按钮设置： 在“Graphic”下，将“Display”设置为“GRAPHIC_ONLY” 然后在行内CSS中使用：-fx-background-colour: transparent;

ImageView： 将图像设置为所需图像 在“Hierarchy”中将ImageView拖放到按钮上

完成后的样子：

透明按钮 - 仅显示图像

- Ry-