使用 Font Awesome 5 SVG 作为 JavaFX 按钮形状

Question

我目前正在开发未修饰的 JavaFX 应用程序，并尝试添加关闭、最大化和最小化按钮并将其形状设置为 Font Awesome 5 SVG。

但是有些 SVG 似乎没有正确显示，例如“窗口最小化”仅显示为一个块。（见图）

FXML 用于按钮

<Button fx:id="min" mnemonicParsing="false">

 <HBox.margin>

  <Insets right="2.5" />

 </HBox.margin>

</Button>

<Button fx:id="max" mnemonicParsing="false">

 <HBox.margin>

  <Insets left="2.5" right="2.5" />

 </HBox.margin></Button>

<Button fx:id="exit" mnemonicParsing="false">

 <HBox.margin>

  <Insets left="2.5" />

 </HBox.margin>

</Button>

CSS 应用

#toolbar .button {

    -fx-background-color: #ecf0f1;

    -size: 16px;

    -fx-min-width: -size;

    -fx-min-height: -size;

    -fx-pref-width: -size;

    -fx-pref-height: -size;

}

#exit {

    -fx-shape: "M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z";

}

#max {

    -fx-shape: "M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z";

}

#min {

    -fx-shape: "M480 480H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h448c17.7 0 32 14.3 32 32s-14.3 32-32 32z";

}

Answer 1

默认情况下，形状会缩放以适应Region其应用的区域。这种缩放导致最小化按钮的形状几乎呈二次方外观。使用未缩放的形状也不是一种选择，因为形状对于此而言太大了。使用-fx-background-insets创建正确的比例。此外，我建议Region在Buttonas 图形内部放置一个并将形状应用于此节点。这允许您为按钮添加背景或增加hitbox：<Button fx:id="min" mnemonicParsing="false" pickOnBounds="true">&nbsp;<HBox.margin>&nbsp; <Insets right="2.5" />&nbsp;</HBox.margin>&nbsp;<graphic>&nbsp; &nbsp;<Region styleClass="shape"/>&nbsp;</graphic></Button><Button fx:id="max" mnemonicParsing="false" pickOnBounds="true">&nbsp;<HBox.margin>&nbsp; <Insets left="2.5" right="2.5" />&nbsp;</HBox.margin>&nbsp;<graphic>&nbsp; &nbsp;<Region styleClass="shape"/>&nbsp;</graphic></Button><Button fx:id="exit" mnemonicParsing="false" pickOnBounds="true">&nbsp;<HBox.margin>&nbsp; <Insets left="2.5" />&nbsp;</HBox.margin>&nbsp;<graphic>&nbsp; &nbsp;<Region styleClass="shape"/>&nbsp;</graphic></Button>#toolbar .button {&nbsp; &nbsp; -size: 20px;&nbsp; &nbsp; -fx-padding: 2px;&nbsp; &nbsp; -fx-background-color: null;&nbsp; &nbsp; -fx-min-width: -size;&nbsp; &nbsp; -fx-min-height: -size;&nbsp; &nbsp; -fx-pref-width: -size;&nbsp; &nbsp; -fx-pref-height: -size;}#toolbar .button .shape {&nbsp; &nbsp; -fx-background-color: #ecf0f1;}#toolbar .button:pressed .shape {&nbsp; &nbsp; /* different background for pressed button */&nbsp; &nbsp; -fx-background-color: lightgreen;}#exit .shape {&nbsp; &nbsp; -fx-shape: "M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z";}#max .shape {&nbsp; &nbsp; -fx-shape: "M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z";}#min .shape {&nbsp; &nbsp; -fx-background-insets: 6px 0 6px 0; /* use proper area for shape */&nbsp; &nbsp; -fx-shape: "M480 480H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h448c17.7 0 32 14.3 32 32s-14.3 32-32 32z";}