如何制作直径为3xp的圆形javafx按钮?

如何制作直径为3xp的圆形javafx按钮?,java,button,javafx,size,Java,Button,Javafx,Size,我想做一个很小的圆形按钮,上面没有文字。下面是我如何尝试的 Button bt = new Button(); bt.setShape(new Circle(1.5)); bt.setMaxSize(3,3); 然而,有两个问题: 1.按钮的形状不是完美的圆形,而是更像一个椭圆形 2.bt.setMaxSize(1.5,1.5)不生效。据我估计,它的直径超过3。。。 如何制作更小的圆形按钮?感谢您的帮助。您只需设置最小尺寸即可。这将有助于: double r=1.5; btn.setShape

我想做一个很小的圆形按钮,上面没有文字。下面是我如何尝试的

Button bt = new Button();
bt.setShape(new Circle(1.5));
bt.setMaxSize(3,3);
然而,有两个问题:
1.按钮的形状不是完美的圆形,而是更像一个椭圆形
2.
bt.setMaxSize(1.5,1.5)不生效。据我估计,它的直径超过3。。。


如何制作更小的圆形按钮?感谢您的帮助。

您只需设置最小尺寸即可。这将有助于:

double r=1.5;
btn.setShape(new Circle(r));
btn.setMinSize(2*r, 2*r);
btn.setMaxSize(2*r, 2*r);
它会给你一个圆形的非常小的按钮。不确定你是否想把它变小,但你也可以这样做。只需将半径
r
更改为所需值。

更新:仔细查看结果按钮,在非常小的按钮上设置José答案中的形状似乎比在这个答案中设置
-fx背景半径更有效(设置形状时,结果按钮看起来更圆)。因此,这里的解决方案可能最适合较大的按钮(例如10px或更大),而设置形状可能最适合3px的极小按钮(尽管这是一个非常细微的区别)


3px是一个非常小的按钮。我不知道你怎么期望人们点击它

您可以使用CSS来创建它

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

以及您要求的3倍尺寸按钮:

通过将较大的值设置为
-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样式表中圆角单选按钮的实现。您可以通过查看jfxrt.jar文件找到样式表,该文件包含JavaFX代码和资源

相比之下,这是一张使用圆形解决方案创建的按钮图像,如José的回答所示:

为什么仍然需要设置minSize()

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

“5em”代表什么

见:

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

所以5em表示字体大小的5倍。默认JavaFX样式表中控件的大多数大小都是使用em单位指定的。这样,当您更改字体或字体大小时,UI将优雅地缩放以适应较大或较小的字体。在这个特殊的例子中,5em的选择非常随意,我只是想要一个大的值,这样按钮就会完全是圆形的,否则
-fx背景半径将创建一个圆角矩形,而不是一个完整的圆形。通过确保传递到
-fx background radius
的半径尺寸大于控件大小的一半,控件将呈现圆形外观

我知道这有点混乱和不直观。我只是从默认的JavaFX样式表中复制了这个概念,我的想法是,不管它有多么混乱,它可能是实现这些效果的最佳实践,否则它将不会在默认样式表中使用

我所看到的这种方法的主要优点是,不需要代码,所有样式都可以直接在CSS中完成(因此您可以在不修改Java代码的情况下更改外观),并且如果您愿意,您可以使用em单位指定坐标,以便控件可以根据您的字体大小进行缩放。因此,这种明显的疯狂背后有一些原因