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

问题描述

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

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

但是，有两个问题:
1.按钮的形状不是完美的圆形，而是更像椭圆形.
2. bt.setMaxSize(1.5,1.5); 不生效.据我估计，它的直径超过 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.

推荐答案

更新: 在仔细查看结果按钮后，在 José 的回答中设置形状似乎比在非常小的按钮上效果更好设置本答案中使用的 -fx-background-radius (设置形状后，生成的按钮看起来更圆一些).所以这里的解决方案可能最适合较大的按钮(例如 10 像素或更多)，而设置形状可能最适合 3 像素的极小按钮(尽管这是一个非常细微的差异).

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-radius as 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).

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

3px is a very small button. I'm not sure how you expect people to click on it.

您可以使用 CSS 来制作它.

You can make it using CSS.

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

Here is a round button of 30px size:

以及您要求的 3px 大小的按钮:

And your requested 3px size button:

舍入是通过给-fx-background-radius设置一个较大的值来实现的.

The rounding is achieved by setting a large value to -fx-background-radius.

屏幕截图是在 Retina mac 上拍摄的，因此它们是原始尺寸的两倍.

Screenshots were taken on a retina mac, so they are twice the size of the original.

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，则需要去掉焦点背景插图.类似于以下内容:

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:

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.

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

The idea of using a -fx-background-radius to 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.

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

By comparison, here is an image of a button created using the Circle shape solution as in José's answer:

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

因为 JavaFX 试图提供合理的默认值.如果空按钮没有默认的最小尺寸，当您将场景调整得更小时，一些按钮就会消失，用户将无法点击它们——这将是一个非常糟糕的用户体验.所以最小尺寸默认为大约 1em，加上一些填充(例如只大于一个字符)，即使按钮上没有设置文本.然而，它只是 Java 系统的默认设置，因为它无法真正知道您的应用程序想要什么.如果默认设置不适用于您的情况，请覆盖它们或提供额外提示，例如明确设置控件的最小大小.

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.

5em"代表什么?

请参阅 JavaFX 8css 参考指南:

em:相关字体的'font-size'

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

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-radius would create a rectangle with rounded corners, rather than a complete circle. By ensuring that the radius dimensions passed to -fx-background-radius are greater than half the size of the control, then the control takes on a round circle appearance.

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

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.

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

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.

这篇关于如何制作直径为 3xp 的圆形的 javafx 按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！