JavaFX Как установить фоновое изображение сцены

Как я могу установить фоновое изображение сцены?


person John    schedule 16.03.2012    source источник


Ответы (4)


Один из подходов может быть таким:

1) Создайте файл CSS с именем style.css и определите в нем селектор id:

#pane{
    -fx-background-image: url("background_image.jpg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 900 506;
    -fx-background-position: center center;
    -fx-effect: dropshadow(three-pass-box, black, 30, 0.5, 0, 0); 
}

2) Установите идентификатор самого верхнего элемента управления (или любого элемента управления) в сцене со значением, определенным в CSS, и загрузите этот файл CSS в сцену:

  public class Test extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        StackPane root = new StackPane();
        root.setId("pane");
        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().addAll(this.getClass().getResource("style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

Вы также можете указать идентификатор элемента управления в файле FXML:

<StackPane id="pane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml" fx:controller="demo.Sample">
    <children>
    </children>
</StackPane>

Дополнительную информацию о стилях CSS JavaFX см. В этом руководстве.

person Uluk Biy    schedule 16.03.2012
comment
Я отправляю еще один вопрос ранее, пожалуйста, помогите ссылку здесь stackoverflow.com/questions/9736393/ - person John; 16.03.2012
comment
Могу ли я изменить фон сцены из другой функции, кроме void start - person Ossama; 22.03.2014
comment
@Ossama, да, ты можешь. Определите два разных селектора CSS (с двумя разными фоновыми свойствами) и в каком-нибудь методе измените идентификатор узла на желаемый. - person Uluk Biy; 22.03.2014
comment
как я могу это сделать. вот мой код stackoverflow.com/questions/ 22572940 / - person Ossama; 22.03.2014
comment
Разве одного центра недостаточно? - person Line; 29.01.2018
comment
Я знаю, что это старый вопрос, и я собираюсь задать ему глупый вопрос. Но где именно создать style.css? У меня он есть в /res/css/style.css ... но выдает ошибку. - person UndercoverCoder; 07.07.2020

Я знаю, что это старый вопрос

Но если вы хотите сделать это программно или Java-способом

Для фоновых изображений; вы можете использовать класс BackgroundImage

BackgroundImage myBI= new BackgroundImage(new Image("my url",32,32,false,true),
        BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT,
          BackgroundSize.DEFAULT);
//then you set to your node
myContainer.setBackground(new Background(myBI));

Для рисования или заливки фона; вы можете использовать класс BackgroundFill

BackgroundFill myBF = new BackgroundFill(Color.BLUEVIOLET, new CornerRadii(1),
         new Insets(0.0,0.0,0.0,0.0));// or null for the padding
//then you set to your node or container or layout
myContainer.setBackground(new Background(myBF));

Сохраняет вашу java в живых и && ваш css мертвым ..

person Elltz    schedule 14.03.2015

Вы можете изменить стиль непосредственно для сцены, используя класс .root:

.root {
    -fx-background-image: url("https://www.google.com/images/srpr/logo3w.png");
}

Добавьте это в CSS и загрузите как «Улук Бий», описанный в его ответе.

person Sergey Grinev    schedule 16.03.2012
comment
Ой! Как сделать так, чтобы изображение заполнило всю сцену? Его оставляют белые пространства слева и вверху. - person John; 17.03.2012
comment
Он все еще покидает место. Корнем сцены является GridPane, и я центрирую сетку на сцене. Как я могу предотвратить центрирование фонового изображения? - person John; 17.03.2012
comment
Я устанавливаю CSS на границу с помощью построителя сцен, он работает, когда я запускаю приложение, но я не вижу никаких изменений в построителе сцены, вы знаете, как это исправить? - person Muhammad Ali; 25.05.2017

В дополнение к ответу @Elltz мы можем использовать как заливку, так и изображение для фона:

someNode.setBackground(
            new Background(
                    Collections.singletonList(new BackgroundFill(
                            Color.WHITE, 
                            new CornerRadii(500), 
                            new Insets(10))),
                    Collections.singletonList(new BackgroundImage(
                            new Image("image/logo.png", 100, 100, false, true),
                            BackgroundRepeat.NO_REPEAT,
                            BackgroundRepeat.NO_REPEAT,
                            BackgroundPosition.CENTER,
                            BackgroundSize.DEFAULT))));

Использовать

setBackground(
                new Background(
                        Collections.singletonList(new BackgroundFill(
                                Color.WHITE,
                                new CornerRadii(0),
                                new Insets(0))),
                        Collections.singletonList(new BackgroundImage(
                                new Image("file:clouds.jpg", 100, 100, false, true),
                                BackgroundRepeat.NO_REPEAT,
                                BackgroundRepeat.NO_REPEAT,
                                BackgroundPosition.DEFAULT,
                                new BackgroundSize(1.0, 1.0, true, true, false, false)
                        ))));

(другой последний аргумент), чтобы изображение было полноэкранным.

person JeSa    schedule 23.05.2019