JavaFX で背景画像を追加する
このチュートリアルでは、JavaFX アプリケーションに背景画像を追加する方法を紹介します。トピックを理解するのに役立つ、含まれているサンプルコードに従うこともできます。
基本的な JavaFX アプリケーションには、プライマリステージ、シーン、および個々のノードが含まれています。シーンはルートをツリー形式で編成し、このツリーのルートはルートノードと呼ばれます。
このクラスは、JavaFX アプリケーションを作成するために、javafx.application の Application クラスを拡張する必要があります。次に、start() メソッドをオーバーライドする必要があります。
ここでは、JavaFX アプリケーションの背景に画像を追加する方法を示します。このプロセスを実行するには、CSS を使用する方法と BackgroundImage クラスを使用する方法の 2つがあります。
CSS を使用して JavaFX 背景画像を追加する
CSS は、Cascading Style Sheets の略語であり、Web ページのスタイル設定に使用されます。さらに、CSS を使用して JavaFX アプリケーションのスタイルを設定することもできます。次の CSS ルールを使用して、背景画像を設定およびスタイル設定します。必要に応じてルールを追加できます。
-fx-background-image: url('image-url');
-fx-background-repeat: no-repeat;
-fx-background-size: 500 500;
-fx-background-position: center center;
ルートノードの setStyle() メソッドを使用して、インライン CSS ルールを使用できます。インライン CSS は、いくつかのルールを追加するだけの場合に最適です。完全な JavaFX コードを以下に示します。
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
StackPane root = new StackPane();
Scene scene = new Scene(root, 650, 650);
root.setStyle(
"-fx-background-image: url('https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/ed5569e8-c0dd-458c-8450-cde6300093bd/File/a5023b0f0fb67f59176a0499af9021ed/java_horz_clr.png'); -fx-background-repeat: no-repeat; -fx-background-size: 500 500; -fx-background-position: center center;");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
インライン CSS は、ルールがたくさんあると少し面倒で理解しにくいものになる可能性があります。代わりに、別の CSS ファイルを作成し、これらのルールをそのファイルに追加できます。CSS ファイルの内容を以下に示します。
#stack-pane{
-fx-background-image: url("https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/ed5569e8-c0dd-458c-8450-cde6300093bd/File/a5023b0f0fb67f59176a0499af9021ed/java_horz_clr.png");
-fx-background-repeat: no-repeat;
-fx-background-size: 500 500;
-fx-background-position: center center;
}
CSS ファイルで ID セレクターを使用したため、JavaFX アプリケーションのルートに同じ ID を設定する必要があります。このプロセスは、setId() プロパティを使用して実行できます。
この CSS ファイルへの参照を追加するだけで、ルールがアプリケーションに適用されます。アプリケーションシーンで getStylesheets() メソッドと add() メソッドを使用して、CSS ファイルを使用します。このための完全なコードを以下に示します。
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
StackPane root = new StackPane();
root.setId("stack-pane");
Scene scene = new Scene(root, 650, 650);
scene.getStylesheets().add(String.valueOf(this.getClass().getResource("sample.css")));
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Java で BackgroundImage を使用して JavaFX 背景画像を追加する
JavaFX は、CSS を追加したくない場合に使用する便利なオプションである BackgroundImage クラスを提供します。このクラスのコンストラクターは、Image クラスオブジェクトとその他の背景画像のプロパティを取ります。このクラスのコンストラクターのシグネチャを以下に示します。
BackgroundImage(Image img, BackgroundRepeat repeatXAxis, BackgroundRepeat repeatYAxis,
BackgroundPosition pos, BackgroundSize size)
デフォルトの位置とサイズを使用します。画像を繰り返さないでください。BackgroundImage オブジェクトを使用して、Background クラスインスタンスを作成する必要があります。最後に、ルートノードで setBackground() を使用して、背景に画像を設定できます。このための完全なコードを以下に示します。
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
StackPane root = new StackPane();
Scene scene = new Scene(root, 650, 650);
Image img = new Image(
"https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/ed5569e8-c0dd-458c-8450-cde6300093bd/File/a5023b0f0fb67f59176a0499af9021ed/java_horz_clr.png");
BackgroundImage bImg = new BackgroundImage(img, BackgroundRepeat.NO_REPEAT,
BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT);
Background bGround = new Background(bImg);
root.setBackground(bGround);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
まとめ
JavaFX は古く、他の新しいテクノロジーに置き換えられている可能性がありますが、それでもさまざまな目的に使用できます。CSS ルールを使用して、JavaFX アプリケーションで背景画像を設定できます。setStyle() メソッドを使用して、CSS をノードに直接適用することもできます。
さらにルールがある場合は、外部 CSS ファイルを使用することもできます。JavaFX には、プレーン Java を簡単に使用して背景を設定するための BackgroundImage クラスも用意されています。