如何制作一个直径为3xp的圆形javafx按钮？

Question

我想制作一个非常小的圆形按钮，上面没有文字。这是我尝试的方法。

Button bt = new Button();
bt.setShape(new Circle(1.5));
bt.setMaxSize(3,3);

但是，有两个问题：
1.按钮的形状并不是完美的圆形，而是更像椭圆形。
2.

bt.setMaxSize(1.5,1.5);

不生效。据我估计，它的直径超过3...
如何制作一个更小更圆的按钮？感谢帮助。

Answer 1

更新：仔细检查结果按钮，在非常小的按钮上设置像José的答案中那样的形状似乎比设置本答案中使用的

-fx-background-radius

效果更好，（当形状已设定）。因此，这里的解决方案可能最适合较大的按钮（例如 10 像素或更大），而设置形状可能最适合 3 像素的极小按钮（尽管这是一个非常微妙的差异）。

---

3px 是一个非常的小按钮。我不确定您希望人们如何点击它。

您可以使用 CSS 来制作它。

这是一个 30px 大小的圆形按钮：

以及您请求的 3px 大小按钮：

通过将

-fx-background-radius

设置较大的值来实现舍入。

屏幕截图是在视网膜 Mac 上拍摄的，因此它们的大小是原始大小的两倍。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Rounding extends Application {

    @Override 
    public void start(Stage stage) throws Exception {
        Button roundButton = new Button();

        roundButton.setStyle(
                "-fx-background-radius: 5em; " +
                "-fx-min-width: 3px; " +
                "-fx-min-height: 3px; " +
                "-fx-max-width: 3px; " +
                "-fx-max-height: 3px;"
        );

        StackPane layout = new StackPane(
                roundButton
        );
        layout.setPadding(new Insets(10));
        stage.setScene(new Scene(layout));

        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

请注意，按钮是用多层背景渲染的。内层是实际的按钮，外面有一个聚焦环和轻微的发光。所以加在一起实际上可能比 3px 稍大一些。如果你想精确地得到 3px，你需要去掉焦点背景插图。如下所示：

roundButton.setStyle(
        "-fx-background-radius: 5em; " +
        "-fx-min-width: 3px; " +
        "-fx-min-height: 3px; " +
        "-fx-max-width: 3px; " +
        "-fx-max-height: 3px; " +
        "-fx-background-color: -fx-body-color;" +
        "-fx-background-insets: 0px; " +
        "-fx-padding: 0px;"
);

这里使用内联样式只是为了让示例小而独立。在实际应用程序中，您可以将样式放入样式表中。

使用

-fx-background-radius

来圆化按钮的想法来自于默认 JavaFX modena.css 样式表中圆角单选按钮的实现。您可以通过查看包含 JavaFX 代码和资源的 jfxrt.jar 文件来找到样式表。

相比之下，这里是使用圆形解决方案创建的按钮图像，如 José 的答案所示：

为什么还需要设置minSize().....

因为 JavaFX 试图提供合理的默认值。如果空按钮没有默认的最小尺寸，当您将场景大小调整得较小时，某些按钮就会消失，用户将无法单击它们 - 这将是非常糟糕的用户体验。因此，即使按钮上没有设置文本，最小尺寸默认约为 1em，加上一些填充（例如，仅大于字符）。然而，它只是 Java 系统的默认设置，因为它无法真正确切地知道您的应用程序想要什么。当默认设置不适合您的情况时，请覆盖它们或提供其他提示，例如显式设置控件的最小大小。

“5em”代表什么？

请参阅 JavaFX 8 css 参考指南：

em：相关字体的“字体大小”

所以 5em 意味着 5 倍的字体大小。默认 JavaFX 样式表中的大多数控件大小都是使用 em 单位指定的。这样，当您更改字体或字体大小时，UI 会优雅地缩放以适应更大或更小的字体。在这种特殊情况下，5em 的选择非常随意，我只是想要一个大值，以便按钮完全圆形，否则

-fx-background-radius

将创建一个带有圆角的矩形，而不是一个完整的圆形。通过确保传递给

-fx-background-radius

的半径尺寸大于控件大小的一半，控件将呈现圆形外观。

我知道这有点令人困惑且不直观。我只是从默认的 JavaFX 样式表中复制了这个概念，我的想法是，无论它多么令人困惑，它可能是实现这些效果的最佳实践，否则它不会在默认样式表中使用。

我认为这种方法的主要优点是不需要任何代码，所有样式都可以直接在 CSS 中完成（因此您可以更改外观而无需修改 Java 代码），并且如果需要，您可以指定坐标以 em 为单位，以便控件根据您的字体大小进行缩放。因此，这种明显的疯狂背后是有原因的。

Answer 2

您只需要设置最小尺寸即可。这样就可以了：

double r=1.5;
btn.setShape(new Circle(r));
btn.setMinSize(2*r, 2*r);
btn.setMaxSize(2*r, 2*r);

它会给你一个圆形且非常小的按钮。不确定你是否想让它变小，但你也可以这样做。只需将半径

r

更改为所需的值即可。