JavaFX에서 배경 이미지 추가

Mohammad Irfan 2023년10월12일
  1. CSS를 사용하여 JavaFX 배경 이미지 추가
  2. Java에서 BackgroundImage를 사용하여 JavaFX 배경 이미지 추가
  3. 요약
JavaFX에서 배경 이미지 추가

이 튜토리얼에서는 JavaFX 애플리케이션에 배경 이미지를 추가하는 방법을 소개합니다. 주제를 이해하는 데 도움이 되도록 포함된 예제 코드를 따를 수도 있습니다.

기본 JavaFX 응용 프로그램에는 기본 단계, 장면 및 개별 노드가 포함되어 있습니다. 장면은 루트를 트리 형식으로 구성하며 이 트리의 루트를 루트 노드라고 합니다.

우리 클래스는 JavaFX 애플리케이션을 생성하기 위해 javafx.applicationApplication 클래스를 확장해야 합니다. 그런 다음 start() 메서드를 재정의해야 합니다.

여기에서는 JavaFX 애플리케이션의 배경에 이미지를 추가하는 방법을 보여줍니다. 이 프로세스를 수행하는 두 가지 방법이 있습니다. CSS를 사용하는 것과 BackgroundImage 클래스를 사용하는 것입니다.

CSS를 사용하여 JavaFX 배경 이미지 추가

CSS는 Cascading Style Sheets의 약자로 웹 페이지의 스타일을 지정하는 데 사용됩니다. 또한 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 파일에 대한 참조를 추가하기만 하면 규칙이 애플리케이션에 적용됩니다. CSS 파일을 사용하기 위해 애플리케이션 장면에서 getStylesheets()add() 메서드를 사용합니다. 이에 대한 전체 코드는 아래에 나와 있습니다.

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 클래스를 제공합니다.

관련 문장 - Java JavaFX