如何制作直径为3xp的圆形javafx按钮?
我想制作一个非常小的圆形按钮,上面没有文字。 这是我尝试的方式。
Button bt = new Button(); bt.setShape(new Circle(1.5)); bt.setMaxSize(3,3);
但是,有两个问题:
1.按钮的形状不是完美的圆形,而是更像椭圆形。
2. bt.setMaxSize(1.5,1.5);
没有生效。 我估计,它的直径超过3 ……
我怎么能做一个更小的圆形按钮? 帮助感谢。
更新:仔细检查结果按钮,设置像José的答案中的形状似乎在非常小的按钮上比在此答案中设置的-fx-background-radius
更好地工作(结果按钮看起来更圆形形状设定)。 因此,这里的解决方案可能最适合较大的按钮(例如10px或更多),而设置形状可能最适合3px的极小按钮(尽管这是一个相当微妙的差异)。
3px是一个非常小的按钮。 我不确定你希望人们如何点击它。
你可以使用CSS制作它。
这是一个30px大小的圆形按钮:
并且您要求的3px尺寸按钮:
通过将大值设置为-fx-background-radius
来实现舍入。
截图是在视网膜上拍摄的,因此它们的尺寸是原始尺寸的两倍。
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:相关字体的’font-size’
所以5em意味着字体大小的5倍。 默认JavaFX样式表中控件的大多数大小都是使用em单位指定的。 这样,当您更改字体或字体大小时,UI会正常缩放以适应更大或更小的字体。 在这种特殊情况下,5em的选择是相当随意的,我只想要一个大的值,使按钮完全是圆的,否则-fx-background-radius
将创建一个带圆角的矩形,而不是一个完整的圆。 通过确保传递给-fx-background-radius
的半径尺寸大于控件尺寸的一半,控件呈现圆形外观。
我知道这有点令人困惑和不直观。 我只是从默认的JavaFX样式表中复制了这个概念,其理念是,无论它多么令人困惑,它可能是实现这些效果的最佳实践,或者它不会在默认样式表中使用。
主要是我可以看到这种方法的优点是不需要代码,所有样式都可以直接在CSS中完成(所以你可以在不修改Java代码的情况下改变外观),如果需要,你可以指定坐标em单位,以便控件按字体大小缩放。 因此明显的疯狂背后有一些原因。
你只需要设置最小尺寸。 这样做:
double r=1.5; btn.setShape(new Circle(r)); btn.setMinSize(2*r, 2*r); btn.setMaxSize(2*r, 2*r);
它会给你一个圆形的非常小的按钮。 不确定你是否想让它变小,但你也可以这样做。 只需将半径r
更改为所需的值即可。
- 为什么我的组件不包装在Swing的FlowLayout中?
- java.lang.ClassFormatError:在类文件javax / mail / MessagingException中非本机或抽象的方法中的Absent Code属性
- 在排序列表中查找最近/最近的值
- 如何在Spring Boot中模拟数据库连接以进行测试?
- Hibernate hql,在同一个查询中执行多个更新语句
- Tokenizer,停止Word删除,用Java封装
- 如何在Java中进行multithreading处理
- hibernate envers:merge&saveOrUpdate
- 如何使用selenium获取android native app的x,y坐标