如何制作直径为 3xp 的圆形的 javafx 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26850828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a javafx button with circle shape of 3xp diameter?
提问by Yvainovski
I want to make a VERY small round button with no text on it. Here is how I tried.
我想制作一个非常小的圆形按钮，上面没有文字。这是我尝试的方法。
Button bt = new Button();
bt.setShape(new Circle(1.5));
bt.setMaxSize(3,3);
However,there are two problems:
1.The shape of the button is not perfectly round, but more like an oval.
2. The bt.setMaxSize(1.5,1.5);does not take effect. As i reckon, its diameter is more than 3...
How could I make a smaller rounder Button? Help Appreciated.
但是，有两个问题：
1.按钮的形状不是完美的圆形，而是更像椭圆形。
2.bt.setMaxSize(1.5,1.5);不生效。据我估计，它的直径超过 3...
我怎样才能制作一个更小的圆形按钮？帮助赞赏。
采纳答案by jewelsea
Update:on close review of the resultant button, setting the shape like in José's answer seems to work better on very small buttons than setting the -fx-background-radiusas used in this answer, (the resultant button looks a bit more circular when the shape is set). So the solution here is probably best for larger buttons (e.g. 10px or more), while setting the shape is probably best for an extremely small button of 3px (it's a pretty subtle difference though).
更新：在仔细查看结果按钮时，在非常小的按钮上设置像 José 的答案中的形状似乎比设置-fx-background-radius此答案中使用的效果更好（设置形状后，结果按钮看起来更圆一些）。所以这里的解决方案可能最适合较大的按钮（例如 10px 或更多），而设置形状可能最适合 3px 的极小按钮（尽管这是一个非常细微的区别）。
3px is a verysmall button. I'm not sure how you expect people to click on it.
3px 是一个非常小的按钮。我不确定您希望人们如何点击它。
You can make it using CSS.
您可以使用 CSS 来制作它。
Here is a round button of 30px size:
这是一个 30px 大小的圆形按钮：
And your requested 3px size button:
和您要求的 3px 大小按钮：
The rounding is achieved by setting a large value to -fx-background-radius.
舍入是通过将一个较大的值设置为 来实现的-fx-background-radius。
Screenshots were taken on a retina mac, so they are twice the size of the original.
屏幕截图是在 Retina 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);
}
}
Note that a button is rendered with layers of backgrounds. The inner layer is the actual button and outside of that there is a focus ring and a slight glow. So together it may actually be slightly larger than 3px. If you want to get 3px exactly, you would need to get rid of the focus background insets. Something like below:
请注意，按钮是用背景层呈现的。内层是实际的按钮，外面有一个对焦环和轻微的发光。因此，它实际上可能比 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;"
);
The inline styles are just used here to allow the sample to be small and self-contained. In a real application, you would put the styles in a stylesheet.
内联样式仅在此处使用，以允许样本较小且独立。在实际应用程序中，您会将样式放在样式表中。
The idea of using a -fx-background-radiusto round the button came from the implementation of the rounded radio buttons in the default JavaFX modena.css stylesheet. You can find the stylesheet by looking inside the jfxrt.jar file which includes JavaFX code and resources.
使用 a-fx-background-radius来圆整按钮的想法来自默认 JavaFX modena.css 样式表中圆角单选按钮的实现。您可以通过查看包含 JavaFX 代码和资源的 jfxrt.jar 文件内部来找到样式表。
By comparison, here is an image of a button created using the Circle shape solution as in José's answer:
相比之下，这是使用圆形解决方案创建的按钮图像，如 José 的回答：
why still need to setup minSize().....
为什么还需要设置 minSize(.....
Because JavaFX is trying to provide reasonable defaults. If there was no defaulted minimum size for an empty button, when you resized your scene smaller, some of the buttons would just disappear and the user would not be able to click on them - which would be a very bad user experience. So the minimum size defaults to about 1em, plus some padding (e.g. just larger than a character), even though no text is set on the button. However, it is just a default set by the Java system as it can't really know exactly what your app wants. When the defaults don't work for your situation, override them or provide additional hints such as explicitly setting the minimum size of the control.
因为 JavaFX 试图提供合理的默认值。如果空按钮没有默认的最小尺寸，当您将场景调整得更小时，一些按钮就会消失，用户将无法点击它们——这将是一个非常糟糕的用户体验。所以最小尺寸默认为大约 1em，加上一些填充（例如只大于一个字符），即使按钮上没有设置文本。但是，它只是 Java 系统的默认设置，因为它无法真正知道您的应用程序想要什么。当默认值不适合您的情况时，覆盖它们或提供额外的提示，例如明确设置控件的最小大小。
What does "5em" stand for?
“5em”代表什么？
See the JavaFX 8 css reference guide:
em: the 'font-size' of the relevant font
em：相关字体的“字体大小”
So 5em means 5 times the font size. Most of the sizes for controls in the default JavaFX stylesheet are specified using em units. That way when you change the font or font size, then the UI scales gracefully to accommodate the larger or smaller font. In this particular case the choice of 5em was pretty arbitrary, I just wanted a large value so that the button would be completely round, otherwise the -fx-background-radiuswould create a rectangle with rounded corners, rather than a complete circle. By ensuring that the radius dimensions passed to -fx-background-radiusare greater than half the size of the control, then the control takes on a round circle appearance.
所以 5em 表示字体大小的 5 倍。默认 JavaFX 样式表中的大多数控件大小都是使用 em 单位指定的。这样，当您更改字体或字体大小时，UI 会优雅地缩放以适应更大或更小的字体。在这种特殊情况下，5em 的选择非常随意，我只想要一个大的值，以便按钮完全是圆形的，否则-fx-background-radius会创建一个带有圆角的矩形，而不是一个完整的圆形。通过确保传递给的半径尺寸-fx-background-radius大于控件大小的一半，控件将呈现圆形外观。
I know this is somewhat confusing and non-intuitive. I just copied the concept from the default JavaFX stylesheet with the idea that, no matter how confusing it may be, it is probably the best practice for achieving these kinds of effects or it would not be used in the default stylesheet.
我知道这有点令人困惑和不直观。我只是从默认的 JavaFX 样式表中复制了这个概念，其想法是，无论它多么令人困惑，它可能是实现这些效果的最佳实践，否则它不会在默认样式表中使用。
Mainly the advantage I can see of such an approach is that no code is required, all styling can be done directly in CSS (so you can change the look without modifying your Java code) and if you want, you can specify co-ordinates in em units, so that the control scales with your font size. So there is some reason behind the apparent madness.
我可以看到这种方法的主要优点是不需要代码，所有样式都可以直接在 CSS 中完成（因此您可以在不修改 Java 代码的情况下更改外观），并且如果需要，您可以在em 单位，以便控件根据您的字体大小进行缩放。所以在明显的疯狂背后有一些原因。
回答by José Pereda
You just need to set also the min size. This will do:
您只需要设置最小尺寸。这将：
double r=1.5;
btn.setShape(new Circle(r));
btn.setMinSize(2*r, 2*r);
btn.setMaxSize(2*r, 2*r);
And it will give you a round and very small button. Not sure if you want to make it smaller, but you can do that too. Just change the radius rto the required value.
它会给你一个圆形的非常小的按钮。不确定你是否想让它变小，但你也可以这样做。只需将半径更改为r所需的值。
