web-dev-qa-db-ja.com

JavaFXでScene Builderを使用してAnchorPaneに背景画像を追加する方法は？

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">
javajavafxfxml
8
pen1993

次のように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がルートです）。

5
DVarga

私はJavaFXを初めて使用しますが、コーディングを一切行わずに、AnchorPaneに背景画像を追加しました。画像をドラッグアンドドロップするだけです。それはScene Builderが設計されたものです。パンを切って以来最高だと思います。

1）背景画像をPhotoshopで編集し、AnchorPaneと同じサイズ（800 x 600ピクセル）にしました。 Photoshopで同じサイズの新しい空のファイルも作成しました。ファイル、新規、空のファイル。次に、背景画像をコピーし、空のファイルの上に貼り付けて、不透明度50％（透明度）を設定できるようにしました。私はそれが好きです、それは私の背景画像を「ソフト」にします。

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

3）背景jpg画像をsrcフォルダーからImage BuilderとしてScene Builderにドラッグし、HierarchyのDocumentにあるAnchorPaneアイコン（ノード）にドロップします。 Scene Builderの左側。 ImageViewが他の場所にドロップした場合、それが属する場所までドラッグします。これがAnchorPaneにあります。それが背景です。

4）背景画像ImageViewを選択（強調表示）した状態で、Scene Builder、Inspector、Layout：ImageViewの右側のパネルの設定を修正します。アンカーペインの制約（クモの巣）の左と上の両方を0に設定します。そして、サイズ、幅に合わせる800、高さ600に合わせる。

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

1
dirk

新しいCSSファイルを作成し、以下に示すコードを挿入して、画像名をurlに書き込む必要があります。

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

この後、アンカーペインを選択してプロパティに移動し、CSSスタイルシートを選択してStleクラスを選択する必要があります。この後、背景が変わります。

すべてのポイントを詳細に説明する完全なチュートリアルを見つけました Scene Builderでアプリケーションの背景を変更する

0
Abdullah Riaz