在TilePane上的imageview顶部添加标签 [英] Add a label on top of an imageview that is on a TilePane

问题描述

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

I was making an app that allows users to create custom shops from a game graphically but I was having troubles as I wanted to add a label which shows how much of an item is in a shop but since the imageview is already on a Tile pane, it creates a label beside it but I wanted to create a label on top of it.

推荐答案

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

You could make your items labels and apply the images as graphic nodes to the labels. When the items are selected, you can invoke label.setText("text string") on the label to change the label's text or css style as needed. If the items need to be interactive, you might want to make the buttons instead of labels.

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

The approach below has a bit of trickery in it by using a combination of contentDisplay="TOP" graphicTextGap="-40.0" and -fx-padding: 0 0 20 0; to position text, which is a little counterintuitive.

<?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组件.使用自定义组件，您将提供布局逻辑，以在您的商品图片上方在内部对文本(以及所需的其他图形)进行分层.这种布局逻辑应该比上面提供的机制更直观.

This is perhaps not the best way to achieve what you want, as you could create a custom ShopItem component derived from Region. With the custom component, you would provide layout logic to internally layer your text (and other graphics as needed) over the top of your item image. This layout logic should be a bit more intuitive than the mechanism provided above.

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

Another approach would be to make each shop item an AnchorPane which contained the image and text label.

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

The custom component approach, though more flexible, is a bit more complicated, so I just provided the simple label based solution here.

这篇关于在TilePane上的imageview顶部添加标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！