【问题标题】:(JavaFX FXML) While trying to make a custom button, how do I get an image to completely fill a button?(JavaFX FXML)在尝试制作自定义按钮时,如何让图像完全填充按钮?
【发布时间】:2017-06-21 15:15:16
【问题描述】:

(JavaFX FXML) 我目前正在使用场景构建器制作应用程序,并且正在尝试制作自定义按钮,我设法将图像放到按钮上,但我不知道如何获取图像完全填充按钮。有任何想法吗?哦,如果有另一种创建自定义按钮的方法也会有所帮助!

这是我的 FXML 代码:

    <?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button layoutX="165.0" layoutY="125.0" mnemonicParsing="false" prefHeight="150.0" prefWidth="270.0">
         <graphic>
            <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@case.png" />
               </image>
            </ImageView>
         </graphic>
      </Button>
   </children>
</AnchorPane>

图像适合按钮,但是我希望它完全填充按钮,或者如果有任何不同的方式将不胜感激!!!

提前谢谢你!

PS:我正在使用 Scene Builder,对于该应用程序的任何有用提示也会非常有帮助

【问题讨论】:

  • 搜索对我来说更好的 css 示例

标签: java image button javafx fxml


【解决方案1】:

如果我理解正确,您根本不想看到按钮边框和颜色。 您可以通过这样的 CSS 自定义按钮:

.fill-btn {
-fx-graphic: url("@case.png");
-fx-background-color: inherit;
-fx-opacity: inherit;
-fx-border: none;
}

并在你的 fxml 中声明它:

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
<children>
    <Button stylesheets="@buttons-style.css" styleClass="fill-btn" layoutX="165.0" layoutY="125.0" mnemonicParsing="false" prefHeight="150.0" prefWidth="270.0">
    </Button>
</children>

【讨论】:

  • 对不起,如果我错了,但我认为他试图将图像大小调整为 Button 的大小,在您的示例中恰恰相反,Button 的大小与图片!
猜你喜欢
  • 2015-05-17
  • 2019-04-02
  • 2014-07-25
  • 2018-06-04
  • 1970-01-01
  • 1970-01-01
  • 2017-11-13
  • 1970-01-01
  • 2015-02-04
相关资源
最近更新 更多