JavaFX Scene Builder 2.0如何將圖像添加到標籤

我正在使用JavaFX Scene Builder 2.0，我想使用FXML將image添加到label。JavaFX Scene Builder 2.0如何將圖像添加到標籤

在oracle docs，我們可以發現如何實現這一目標使用Java代碼，但我想實現這個使用場景生成器

2014-09-18 user3375401

有兩種方法來實現這個

使用FXML
使用CSS

FXML

<Label text="My Image"> 
    <graphic> 
     <ImageView fitWidth="150" preserveRatio="true" smooth="true"> 
     <image> 
      <Image url="myImage.png"/> 
     </image> 
     </ImageView> 
    </graphic> 
</Label>

在場景構建器中，將一個ImageView拖動到一個標籤的頂部，它將自動設置爲該標籤的圖形。然後選擇ImageView並在「場景生成器」屬性窗格的ImageView的圖像字段中鍵入圖像的URL。

CSS

在FXML分配一個id到Label。你還會發現一個id作爲標籤的場景生成器屬性

<Label text= "My Image" id = "labelwithimage"/>

現在，您可以指定CSS值直接FXML（使事情變得笨拙），或創建一個新的CSS文件，並在其定義的屬性

直接分配

<Label text= "My Image" id = "labelwithimage" style="-fx-graphic:url('myImage.png'); -fx-graphic-text-gap : 10;"/>

對於在CSS文件中定義它，你需要創建一個CSS文件，明確反對id assig的atrributes斯內德在Label，包括它在FXML

mycss.css

#labelwithimage {   
    -fx-graphic: url("myImage.png"); 
    -fx-graphic-text-gap : 10; 
}

正如你可能已經猜到了，-fx-graphic確實是我們內部<graphic></graphic>寫的一切，很少有其他屬性，如-fx-graphic-text-gap。你可以在Label中找到所有可用於css reference guide for label

現在在css中的最後一件事是在fxml中加載css。爲此，您需要包含以下標籤內你FXML

<stylesheets> 
    <URL value="@mycss.css" /> 
</stylesheets>

只要確保有在FXML

來源

2014-09-19 06:45:05 ItachiUchiha

還有一種方法，在https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Labeled.html#setGraphic-javafx.scene.Node- – Zavael 2015-12-11 10:06:55

也可以直接在現場生成器做適當的進口，而不手動觸摸FXML或CSS。

只需將ImageView節點拖放到標籤上即可。然後可以在添加的ImageView節點上設置圖像的路徑。

或者，您可以將圖像文件從文件資源管理器（或等效文件）拖到Scene Builder中的標籤中。 Scene Builder將自動添加中間ImageView節點。然後，您可以根據需要調整路徑（相對於文檔，類路徑相對等）。

實際上，該方法與Java代碼以及FXML的直接修改相同：只需將ImageView設置爲標籤的「圖形」節點即可。

這也適用於按鈕。

來源

2015-06-30 11:01:23 Padrig

這應該是被接受的答案。 – 2016-03-12 00:40:00

JavaFX Scene Builder 2.0如何將圖像添加到標籤

回答

相關問題