Question

我正在创建一个应用程序，允许用户以图形方式从游戏中创建自定义商店，但我遇到了麻烦，因为我想添加一个标签，显示商店中有多少商品，但由于imageview已经在平铺窗格，它在它旁边创建一个标签，但我想在它上面创建一个标签。

Answer 1

您可以制作商品标签，并将图像作为图形节点应用于标签。选择项目后，您可以在标签上调用label.setText("text string")以根据需要更改标签的文本或CSS样式。如果项目需要是交互式的，您可能需要创建按钮而不是标签。

下面的方法通过使用contentDisplay="TOP" graphicTextGap="-40.0"和-fx-padding: 0 0 20 0;的组合来定位文本有一些诡计，这有点违反直觉。

showme

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<StackPane id="StackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <TilePane hgap="10.0" prefColumns="3" prefHeight="-1.0" prefRows="1" prefWidth="-1.0" style="-fx-background-color: linear-gradient(palegreen, forestgreen);&#10;-fx-padding: 20px;" vgap="10.0">
      <children>
        <Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;&#10;-fx-text-fill: gold;&#10;-fx-padding: 0 0 20 0;" text="Roast Beef">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/piggy-bank-icon.png" backgroundLoading="true" />
              </image>
            </ImageView>
          </graphic>
        </Label>
        <Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;&#10;-fx-text-fill: gold;&#10;-fx-padding: 0 0 20 0;&#10;-fx-border-color: palegoldenrod;&#10;-fx-border-width: 5px;&#10;-fx-border-radius: 10px;&#10;-fx-border-insets: -5px;&#10;" text="Bag 'o' Love">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/bag-icon.png" backgroundLoading="false" />
              </image>
            </ImageView>
          </graphic>
        </Label>
        <Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;&#10;-fx-text-fill: gold;&#10;-fx-padding: 0 0 20 0;" text="Show Me">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/wallet-icon.png" backgroundLoading="true" />
              </image>
            </ImageView>
          </graphic>
        </Label>
      </children>
    </TilePane>
  </children>
</StackPane>
<!-- icon usage license: 
     Creative Commons with attribution,
     back link to http://www.rockettheme.com required -->

这可能不是实现您想要的最佳方式，因为您可以创建从Region派生的自定义ShopItem组件。使用自定义组件，您将提供布局逻辑，以在项目图像的顶部内部层叠文本（以及其他需要的图形）。这种布局逻辑应该比上面提供的机制更直观。

另一种方法是使每个商店项目成为包含图像和文本标签的AnchorPane。

自定义组件方法虽然更灵活，但有点复杂，所以我在这里提供了基于标签的简单解决方案。

在TilePane上的imageview顶部添加标签

1 个答案: