如何在JavaFX中使用Scene Builder將背景圖像添加到AnchorPane？

Question

如何使用Scene Builder將背景圖像添加到AnchorPane ？

我試過它：

-fx-background-image url('C:/Users/Documents/page_background.gif')

我如何在Scene Builder中設置它。

並生成的FXML：

<AnchorPane id="LoginAnchorPane" fx:id="LoginAnchorPane" prefHeight="400.0" prefWidth="600.0" style="-fx-background-image: url('C:/Users/Documents/page_background.gif');" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafx_lsdu.LoginController">

Answer 1

您可以嘗試在Scene Builder中直接將其設置為：

-fx-background-image: url('file:C:/Users/Documents/page_background.gif')

它需要指定方案/協議。

但建議的方法是在CSS文件中分離CSS樣式。 例如，您可以在CSS文件中創建一個CSS樣式類（讓我們稱之為“application.css”）：

application.css

.anchor {
    -fx-background-image:url('file:/C:/Users/Documents/page_background.gif');
}

然后在FXML文件中將此樣式表添加到根目錄，並將anchor樣式類添加到AnchorPane ：

<AnchorPane prefHeight="545.0" prefWidth="712.0" styleClass="anchor" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.60">
  <stylesheets>
    <URL value="@application.css" />
  </stylesheets>
</AnchorPane>

注意：樣式表應添加到根節點（在示例中， AnchorPane是根節點）。

Answer 2

我是JavaFX的新手，但我在沒有任何編碼的情況下向我的AnchorPane添加了背景圖像。 只需拖放圖像即可。 那就是Scene Builder的設計，不是這樣嗎？ 我認為這是切片面包以來最好的東西。

1）我用Photoshop編輯了我的背景圖片，以獲得與我的AnchorPane相同的尺寸，800 x 600像素。 我還在Photoshop中創建了一個相同大小的新空白文件。 文件，新，空白文件。 然后我復制了我的背景圖片並將其粘貼在空白文件的頂部，以便我可以設置不透明度50％（透明度）。 我喜歡這樣，它使我的背景圖片“柔和”。

2）我將50％不透明度（50％透明）背景圖片復制到我的NetBeans項目的src（source）文件夾中。 src文件夾是普通的Windows資源管理器文件夾。

3）將背景jpg圖像從src文件夾拖放到Scene Builder中作為ImageView，拖放到Document，Hierarchy中的AnchorPane圖標（節點）上。 Scene Builder的左側。 如果ImageView在其他地方掉落，將它拖到它所屬的位置，你想要它在AnchorPane中，那就是背景。

4）選擇背景圖像ImageView（突出顯示），修復Scene Builder，Inspector，Layout：ImageView右側面板上的設置。 將Anchor Pane Constraints（蜘蛛網物）左側和頂部設置為0.並修復尺寸，適合寬度800，適合高度600。

就像餡餅一樣簡單。 無需編碼，Scene Builder會自動為您編寫代碼。 也不需要css文件。 很高興，你可以看到你在做什么。 Wysiwyg，你看到的就是你得到的。

Answer 3

您需要創建一個新的CSS文件並將下面給出的代碼放入其中，並在url中寫入您的圖像名稱。

.bodybg{
     -fx-background-image: url('**your image name**.jpg');
     -fx-background-size: 100% 100%;    
  }

在此之后，您必須選擇錨定窗格，轉到其屬性並選擇CSS樣式表並選擇Stle類。 在此之后，您的背景將會改變。

我找到了一個完整的教程，詳細解釋了所有要點。 在Scene Builder中更改應用程序背景