Adicionar uma imagem de fundo em JavaFX

1. Adicionar uma imagem de fundo JavaFX usando CSS
2. Adicione uma imagem de fundo JavaFX usando BackgroundImage em Java
3. Resumo

Este tutorial apresenta como adicionar imagens de fundo no aplicativo JavaFX. Você também pode seguir os códigos de exemplo que incluímos para ajudá-lo a entender o tópico.

O aplicativo JavaFX básico contém um estágio primário, uma cena e nós individuais. A cena organiza as raízes em formato de árvore, e a raiz dessa árvore é chamada de Root Node.

Nossa classe deve estender a classe Application de javafx.application para criar um aplicativo JavaFX. Então, precisamos sobrescrever o método start().

Aqui, mostraremos como adicionar uma imagem ao plano de fundo de um aplicativo JavaFX. Existem duas maneiras de fazer este processo: usando CSS e usando a classe BackgroundImage.

Adicionar uma imagem de fundo JavaFX usando CSS

CSS é uma abreviatura de Cascading Style Sheets e é usado para estilizar páginas da web. Além disso, CSS também pode ser usado para estilizar aplicativos JavaFX. Usaremos as seguintes regras CSS para definir e estilizar a imagem de fundo. Você pode adicionar mais regras de acordo com suas necessidades.

-fx-background-image: url('image-url');
-fx-background-repeat: no-repeat; 
-fx-background-size: 500 500; 
-fx-background-position: center center;

Podemos usar regras CSS embutidas com a ajuda do método setStyle() no nó raiz. CSS embutido é ótimo se quisermos apenas adicionar algumas regras. O código JavaFX completo é mostrado abaixo.

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 embutido pode se tornar um pouco complicado e difícil de entender se tivermos muitas regras. Em vez disso, podemos criar um arquivo CSS separado e adicionar essas regras a esse arquivo. O conteúdo do arquivo CSS é mostrado abaixo.

#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;
}

Usamos um seletor de ID no arquivo CSS, portanto, devemos definir o mesmo ID para a raiz de nosso aplicativo JavaFX. Este processo pode ser feito usando a propriedade setId().

Podemos simplesmente adicionar uma referência a este arquivo CSS e as regras serão aplicadas ao nosso aplicativo. Usaremos os métodos getStylesheets() e add() na cena do aplicativo para usar o arquivo CSS. O código completo para isso é mostrado abaixo.

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);
  }
}

Adicione uma imagem de fundo JavaFX usando BackgroundImage em Java

JavaFX fornece uma classe BackgroundImage, uma opção conveniente de usar se não quisermos adicionar CSS. O construtor desta classe pega um objeto de classe Image e outras propriedades de imagem de fundo. A assinatura do construtor desta classe é mostrada a seguir.

BackgroundImage(Image img, BackgroundRepeat repeatXAxis, BackgroundRepeat repeatYAxis,
    BackgroundPosition pos, BackgroundSize size)

Usaremos a posição e o tamanho padrão e a imagem não deve ser repetida. Precisamos usar o objeto BackgroundImage para criar uma instância de classe Background. Finalmente, podemos usar o setBackground() no nó raiz para definir a imagem no fundo. O código completo para isso é mostrado abaixo.

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);
  }
}

Resumo

O JavaFX pode estar desatualizado e substituído por outras tecnologias mais recentes, mas ainda pode ser usado para vários fins. Podemos definir a imagem de fundo em um aplicativo JavaFX usando regras CSS. Também podemos aplicar CSS diretamente aos nós usando o método setStyle().

Se tivermos mais regras, também podemos usar um arquivo CSS externo. O JavaFX também fornece uma classe BackgroundImage para definir o plano de fundo usando apenas o Java puro facilmente.