Comment ajouter un background-image à AnchorPane en utilisant Scène Builder dans JavaFX?

Comment ajouter image d'arrière-plan à un AnchorPane en utilisant Scène Builder?

Je l'ai essayé:

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

Comment j'ai mis cela dans Scene Builder.

Et les 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">

OriginalL'auteur pen1993 | 2016-07-25

5

Vous pouvez essayer de mettre directement en Scène Constructeur:
```
-fx-background-image: url('file:C:/Users/Documents/page_background.gif')
```
Il exige que le régime de/protocole spécifié.

Mais la manière suggérée, afin de séparer le style CSS dans un fichier CSS. Par exemple, vous pouvez créer un style CSS de la classe dans votre fichier CSS (appelons-le "l'application.css"):

application.css
```
.anchor {
    -fx-background-image:url('file:/C:/Users/Documents/page_background.gif');
}
```
Puis dans le fichier FXML vous ajoutez cette feuille de style à la racine et vous ajoutez le anchor style de classe à la 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>
```
Remarque: les feuilles de style devrait être ajouté au nœud racine (dans l'exemple, la AnchorPane est la racine).

"format Absolu" est le mal ici. Il reqires le système/protocole pour être spécifiés ou bien il va faire de la recherche à l'aide du chargeur de classe. En outre, il devrait être présent dans le fichier CSS.
Merci pour la correction, j'ai mis à jour la réponse.
Pouvons-nous obtenir du répertoire courant au lieu de C:/ ...? Par exemple, comment puis-je obtenir ../../ressources/bonjour.png ce pic?

OriginalL'auteur DVarga
1

Je suis nouveau sur JavaFX, mais j'ai ajouté une image de fond pour mon AnchorPane sans codage que ce soit. Faites simplement glisser et déposez l'image. Qu'est ce que la Scène du Générateur a été conçu pour, pas vrai? Je pense que c'est la meilleure chose depuis le pain tranché.

1) j'ai édité mon image de fond avec Photoshop, pour obtenir la taille est la même que ma AnchorPane, 800 x 600 pixels. J'ai également créé un nouveau fichier vide dans Photoshop, de la même taille. Fichier, Nouveau, Vierge De Fichier. Puis-je copier mon image de fond et collé sur le dessus du vide, pour me permettre de régler l'Opacité de 50% (la transparence). J'aime ça, ça fait mon image d'arrière-plan de “doux”.

2) j'ai copié mon Opacité de 50% (50% transparent) image de fond dans le src (source) dossier de mon projet NetBeans. Le dossier src est un banal dossier de l'Explorateur Windows.

3) faites Glisser et déposez le fond de l'image jpg du dossier src en Scène Builder comme une ImageView, sur le AnchorPane icône (nœud) qui est dans le Document, de la Hiérarchie. Côté gauche de la Scène Builder. Si l'ImageView gouttes d'ailleurs, faites-le glisser jusqu'à l'endroit où il appartient, vous le voulez dans la AnchorPane, c'est l'arrière-plan.

4) Avec votre image d'arrière-plan ImageView sélectionné (mis en surbrillance) de corriger les paramètres sur le panneau de droite de la Scène Builder, Inspecteur, Mise en page:ImageView. Placez le point d'Ancrage Volet de Contraintes (la toile d'araignée chose) en haut et à gauche, deux à 0. Et de fixer la Taille, Ajustement de la Largeur de 800, Ajustement de la Hauteur de 600.

Simple comme bonjour. Il n'est pas nécessaire pour le codage, Scene Builder écrit automatiquement le code pour vous. Il ya aussi pas besoin d'un fichier css. Quel plaisir, vous pouvez voir ce que vous faites. Wysiwyg, ce que vous voyez est ce qui obtenez vous.

Veuillez vous abstenir de dire aux gens quelque chose est facile (ou "simple comme bonjour") - il est facile de vous, de ne pas l'OP, ou quelqu'un d'autre ne sachant pas comment faire cela.
Merci, David. Va faire. Plutôt ... ne pas le faire à nouveau. Je suppose OP signifie "affiche originale', la personne qui a posté la question.

OriginalL'auteur dirk
0

Vous avez besoin de faire un nouveau fichier CSS et de mettre le code ci-dessous dans écrire votre nom de l'image dans l'url.
```
.bodybg{
     -fx-background-image: url('**your image name**.jpg');
     -fx-background-size: 100% 100%;    
  }
```
après cela, vous devez sélectionner votre ancre volet d'aller à leurs propriétés et sélectionnez feuille de Style CSS et sélectionnez Stle de classe. Après cela, votre arrière-plan change.

J'ai trouvé un tutoriel complet expliquant tout point dans le détail Changer votre Fond d'Application en Scène Builder

OriginalL'auteur Abdullah Riaz

Vous devez vous connecter pour publier un commentaire.