如何使用JavaFX中的Scene Builder將Anchor-image添加到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

你可以嘗試直接在場景生成器設置爲：

-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中創建了一個新的空白文件，大小相同。文件，新建，空白文件。然後我複製我的背景圖片並將其粘貼在空白文件的頂部，以使我能夠設置Opacity 50％（透明度）。我喜歡這樣，它使我的背景圖片「柔和」。

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

3）將背景jpg圖像從src文件夾拖放到Scene Builder中作爲ImageView，拖放到Document，Hierarchy中的AnchorPane圖標（節點）上。場景構建器的左側。如果ImageView丟棄到其他地方，請將其拖動到它所屬的位置，然後將它放在AnchorPane中，這就是背景。

4）使用背景圖像選擇（突出顯示）ImageView修復場景構建器，檢查器，佈局：ImageView的右側面板上的設置。設置錨窗格約束（蜘蛛網的東西）左和頂，都爲0.並修復大小，適合寬度800，適合高度600.

像餡餅一樣容易。無需編碼，Scene Builder會自動爲您編寫代碼。也不需要一個css文件。非常高興，你可以看到你在做什麼。 Wysiwyg，你看到的是你得到的。