web-dev-qa-db-fra.com

Comment ajouter une image d'arrière-plan à AnchorPane en utilisant Scene Builder dans JavaFX?

Comment ajouter une image d'arrière-plan à un AnchorPane à l'aide de Scene Builder?

Je l'ai essayé comme:

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

Comment je l'ai défini dans Scene Builder .

Et le FXML généré:

<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">
javajavafxfxml
8
pen1993

Vous pouvez essayer de le définir directement dans Scene Builder comme:

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

Il nécessite que le schéma/protocole soit spécifié.

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

application.css

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

Ensuite, dans le fichier FXML, vous ajoutez cette feuille de style à la racine et vous ajoutez la classe de style anchor à 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 doivent être ajoutées au nœud racine (dans l'exemple, AnchorPane est la racine).

5
DVarga

Je suis nouveau sur JavaFX, mais j'ai ajouté une image d'arrière-plan à mon AnchorPane sans aucun codage. Faites simplement glisser et déposez l'image. C'est pour cela que Scene Builder a été conçu, n'est-ce pas? 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 même taille que mon AnchorPane, 800 x 600 pixels. J'ai également créé un nouveau fichier vierge dans Photoshop, de même taille. Fichier, nouveau fichier vierge. Ensuite, j'ai copié mon image d'arrière-plan et l'ai collée au-dessus du fichier vierge, pour me permettre de définir l'opacité à 50% (transparence). J'aime ça, ça rend mon image de fond "douce".

2) J'ai copié mon image d'arrière-plan à 50% d'opacité (50% de transparence) dans le dossier src (source) de mon projet NetBeans. Le dossier src est un dossier Windows Explorer ordinaire.

3) Faites glisser et déposez l'image jpg d'arrière-plan du dossier src dans Scene Builder en tant qu'ImageView, sur l'icône AnchorPane (nœud) qui se trouve dans Document, Hiérarchie. Côté gauche de Scene Builder. Si ImageView tombe ailleurs, faites-le glisser jusqu'à l'endroit où il appartient, vous le voulez dans le volet d'ancrage, c'est l'arrière-plan.

4) Avec votre image d'arrière-plan ImageView sélectionnée (en surbrillance), fixez les paramètres sur le panneau de droite de Scene Builder, Inspector, Layout: ImageView. Définissez les contraintes du volet d'ancrage (la toile d'araignée) à gauche et en haut, à la fois sur 0. Et fixez la taille, la largeur d'ajustement 800, la hauteur d'ajustement 600.

Aussi facile que la tarte. Il n'est pas nécessaire de coder, Scene Builder écrit automatiquement le code pour vous. Il n'y a pas non plus besoin d'un fichier css. Quel plaisir, vous pouvez voir ce que vous faites. Wysiwyg, ce que vous voyez est ce que vous obtenez.

1
dirk

Vous devez créer un nouveau fichier CSS et mettre le code ci-dessous, écrire le nom de votre 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 volet d'ancrage, accédez à leurs propriétés et sélectionnez la feuille de style CSS et sélectionnez la classe Stle. Après cela, votre expérience changera.

J'ai trouvé un tutoriel complet expliquant tous les points en détail Modifiez l'arrière-plan de votre application dans Scene Builder

0
Abdullah Riaz