Как добавить фоновое изображение в AnchorPane с помощью Scene Builder в JavaFX?

как добавить фоновое изображение к AnchorPane С помощью Scene Builder?

Я пробовал так:

-fx-background-image url('C:/Users/Documents/page_background.gif')

как я установил это в Сцена 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">

7
fxml java javafx

3 ответов

вы можете попробовать установить его непосредственно в Scene Builder как:

-fx-background-image: url('file:C:/Users/Documents/page_background.gif')

для этого требуется указать схему / протокол.

но предлагаемый способ, чтобы отделить стиль CSS в файле CSS. Например, вы можете создать класс стиля CSS в своем CSS-файле (назовем его "приложение".css"):

приложение.в 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

Я новичок в JavaFX, но я добавил фоновое изображение в свою анкерную панель без какого-либо кодирования. Просто перетащите изображение. Это то, для чего был разработан Scene Builder, не так ли? Я думаю, это лучшее, что есть после нарезанного хлеба.

1) я отредактировал фоновое изображение с помощью Photoshop, чтобы получить тот же размер, что и моя анкерная панель, 800 x 600 пикселей. Я также создал новый пустой файл в Photoshop того же размера. Файл, Новый, Пустой Файл. Затем я скопировал фоновое изображение и вставил его. поверх пустого файла, чтобы я мог установить непрозрачность 50% (прозрачность). Мне это нравится, это делает мою фоновую картину "мягкой".

2) я скопировал фоновое изображение 50% непрозрачности (50% прозрачности) в папку src (source) моего проекта NetBeans. Папка src-это обычная папка Проводника Windows.

3) перетащите фоновое изображение jpg из папки src в Scene Builder как ImageView, на значок AnchorPane (узел), который находится в документе, иерархии. Левая сторона сцены Builder. Если ImageView падает где-то еще, перетащите его туда, где он принадлежит, вы хотите его в AnchorPane, это фон.

4) с выбранным фоновым изображением ImageView (выделено) исправьте настройки на правой панели Scene Builder, Inspector, Layout:ImageView. Установите ограничения панели привязки (вещь паутины) слева и сверху, оба в 0. И зафиксируйте размер, приспособьте ширину 800, приспособьте высоту 600.

Так же просто, как пирог. Есть нет необходимости в кодировании, Scene Builder автоматически пишет код для вас. Также нет необходимости в файле css. Какое удовольствие, вы видите, что делаете. Wysiwyg, что вы видите, то и получаете.

0

вам нужно сделать новый файл CSS и поместить в него код, указанный ниже, напишите свое имя изображения в url.

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

после этого вы должны выбрать панель привязки перейдите к их свойствам и выберите таблицу стилей CSS и выберите класс Stle. После этого ваш фон изменится.

Я нашел полный учебник, объясняющий все подробно измените фон приложения в Scene Builder

0