JavaFXでシーンビルダを使用してAnchorPaneに背景画像を追加する方法は？

Question

Scene Builderを使用して背景画像をAnchorPaneに追加するにはどうすればよいですか？

私はそれを試してみた：私はScene Builderでこれを設定する方法

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

。

と生成さFXML：それが指定するスキーム/プロトコルを必要と

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

：としてあなたがシーンBuilderで直接設定しようとすることができます

<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

。

しかし、CSSファイル内のCSSスタイルを区切ることを推奨します。

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

が続いFXMLファイルで使用すると、このスタイルシートを追加

application.css：たとえば、あなたのCSSファイル内のCSSスタイル・クラスを作成することができます（のは「application.css」と呼んでみましょう）ルートに、あなたはAnchorPaneにanchorスタイルクラスを追加します。

<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）800x600ピクセルのAnchorPaneと同じサイズを得るために、Photoshopで背景画像を編集しました。私はまた、同じサイズのPhotoshopで新しい空のファイルを作成しました。ファイル、新規、空白のファイル。その後、背景画像をコピーして空白ファイルの上に貼り付けて、不透明度を50％（透明度）に設定できるようにしました。私はそれが好きです、それは私の背景の画像を "ソフト"にします。

2）私のNetBeansプロジェクトのsrc（source）フォルダに、50％透明度の背景画像をコピーしました。 srcフォルダは、通常のWindowsエクスプローラフォルダです。

3）バックグラウンドjpgイメージをsrcフォルダからImageViewとしてScene Builderにドラッグアンドドロップして、Document、HierarchyにあるAnchorPaneアイコン（ノード）にドロップします。シーンビルダの左側。 ImageViewがどこか他の場所に落ちた場合は、それが所属する場所までドラッグします。アンカーパネルではその背景が必要です。

4）背景画像を使用して、選択した（強調表示されている）シーンビルダ、インスペクタ、レイアウト：ImageViewの右側のパネルで設定を修正します。 Anchor Pane Constraints（スパイダーウェブのもの）を左と上の両方に合わせて0に設定し、サイズ、幅800に合わせ、高さ600に固定します。

パイと同じくらい簡単です。コーディングする必要はありません。シーンビルダによってコードが自動的に書き込まれます。また、CSSファイルは必要ありません。何が喜んでいるのか、あなたは何をしているのかを見ることができます。 Wysiwyg、あなたが見るものはあなたが得るものです。