当前位置: 首页 > 面试题库 >

如何制作一个3xp直径的圆形Javafx按钮?

康元凯
2023-03-14
问题内容

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

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在此答案中使用设置更好(在设置形状时,结果按钮看起来更圆一些)。因此,这里的解决方案可能最适合较大的按钮(例如10像素或更多),而设置形状可能最适合3像素的极小按钮(尽管这是一个非常细微的差别)。

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

您可以使用CSS进行制作。

通过将设置为较大的值来舍入-fx-background-radius。

屏幕截图是在视网膜Mac上拍摄的,因此它们的大小是
原始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代码和资源的样式表。

为什么还需要设置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单位,以便控件随字体大小缩放。因此,明显的疯狂背后有一些原因。



 类似资料:
  • 我需要在透明的中心周围创建一个圆形框架。框架具有从内到外边界的径向梯度。 圆形div很容易,边界半径为50%。 问题是在边框上添加径向梯度。我尝试了边框图像,边框颜色,框阴影,径向渐变没有任何成功,而背景图像我没有设法有透明的中心。 有什么建议吗? 谢谢,恩里科

  • 我想做一个圆形的表面视图。我找了很多,但找不到好的解决办法。我现在正在做的是,我将SurfaceView放入一个FrameLayout,然后在它上面放置另一个视图,要么使用PNG掩码,要么使用可绘制的形状xml。给你 但这不是一个好的解决方案,也不是完美的解决方案。我想将surfaceview自定义为圆形。任何帮助都将不胜感激。谢谢:)

  • 如何创建类似于< code > floating action button 的东西?

  • 我对这类事情很陌生,但这是我的问题。我已经看了几个问题,它是有意义的,如何使它的圆形,但图像,使圆形是一半被切断,有没有一个方法来解决这一点。我正在使用HTML和CSS。

  • 主要内容:圆角矩形,椭圆示例JavaFX Shape类定义了常见的形状,例如线,矩形,圆,Arc,CubicCurve,Ellipse和QuadCurve。 在场景图上绘制矩形需要宽度,高度和左上角的(,)位置。 要在JavaFX中绘制一个矩形,可以使用类。 上面的代码生成以下结果。 圆角矩形 类实现了弧宽和弧高。可以使用这些功能来绘制圆角矩形。 上面的代码生成以下结果。 椭圆示例 上面的代码生成以下结果。