java - (JavaFX 8) 图形顶部的按钮文本

Question

我使用 CSS 将图像设置为按钮(示例):

#button-id {
    -fx-background-color: transparent;
    -fx-graphic: url("/main/img/mybutton.png");

现在图像已经包含按钮文本，但我发现这很不优雅，因为每次出现带有不同文本的新按钮时，我都必须创建一个新的按钮图形。通过代码设置按钮的文本(例如 mybutton.setText("Text");)仅显示按钮旁边的文本。

对节点使用 -fx-background-image: url("myurl"); 会奇怪地平铺图像，而不是缩放到原始大小的单个图像。手动设置大小也很不舒服。

在图像和按钮本身之间使用 Pane 对我来说看起来不太优雅。我真的希望有一个更好、更简单的解决方案。

对于这种情况有什么建议吗？

Answer 1

您可以使用 -fx-background-repeat 和 -fx-background-size 属性避免背景图像平铺:

#button-id {
    -fx-background-image: url("/main/img/mybutton.png");
    -fx-background-repeat: no-repeat;
    -fx-background-size: contain;
    ...
}

据我所知，除了使用包含图像和文本作为子图形的 StackPane 之外，没有其他方法可以将图像与文本堆叠在一起，而使用 CSS 无法完成此操作。