在TilePane上的圖像視圖頂部添加標籤

Question

我正在製作一款應用程序，允許用戶以圖形方式從遊戲創建自定義商店，但由於我想添加一個標籤來顯示多少圖標項目在商店中，但由於imageview已經在Tile窗格上，它會在旁邊創建一個標籤，但我想在它上面創建一個標籤。

Answer 1

您可以製作標籤並將圖像作爲圖形節點應用於標籤。當選擇這些項目時，您可以調用標籤上的label.setText("text string")以根據需要更改標籤的文本或CSS樣式。如果項目需要互動，您可能需要製作按鈕而不是標籤。

下面的方法通過使用contentDisplay="TOP" graphicTextGap="-40.0"和-fx-padding: 0 0 20 0;的組合來定位文本有點詭計，這有點違反直覺。

<?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 --> 

這也許不是達到你想要什麼，你可以創建一個從地區派生的自定義組件ShopItem最好的方式。使用自定義組件，您可以提供佈局邏輯，以在內部將文本（以及其他圖形根據需要）層疊到項目圖像的頂部。這種佈局邏輯應該比上面提供的機制更直觀。

另一種方法是將每個商店項目製作爲包含圖像和文本標籤的AnchorPane。

自定義組件方法雖然更加靈活，但有點複雜，所以我只是在這裏提供了基於標籤的簡單解決方案。