如何使用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，你看到的是你得到的。