JavaFX: comment ajouter des ombres

Vous pouvez remarquer que l'ombre de ce rectangle JavaFX représenté ici ne semble pas très réaliste. Cela est parce qu'il est directement derrière le rectangle, comme si la source de lumière provoquant l'ombre étaient morts avant. Habituellement, nous nous attendons à des ombres d'être à un léger angle de l'objet projetant l'ombre, le plus souvent en dessous de l'objet et le décalage d'un côté.

Heureusement, le DropShadow classe a plusieurs propriétés qui vous permettent de contrôler la taille et le positionnement de l'ombre. Ces méthodes sont répertoriées dans ce tableau, qui énumère les détails non seulement de la DropShadow classe, mais aussi de sa classe de sœur, InnerShadow. La InnerShadow classe crée une ombre à l'intérieur d'une forme plutôt que de l'extérieur de la forme. Pour le moment, se concentrer sur DropShadow.

Les procédés de la DropShadow classe vous permettent de spécifier la géométrie exacte de l'ombre que vous voulez appliquer. La setLargeur et setHeight méthodes vous permettent de spécifier la taille de l'ombre, et de la setOffsetX et setOffsetY méthodes vous permettent de modifier l'emplacement de l'ombre par rapport au centre de la forme. Typiquement, vous allez ajouter un x positif et décalage y de sorte que l'ombre apparaît ci-dessous et à droite de la forme, comme ceci:

DropShadow Shadow1 = new DropShadow () - shadow1.setOffsetX (10) -shadow1.setOffsetY (10) -

Dans cet exemple, l'ombre est placé 10 pixels vers la droite et 10 pixels sous la forme.

La setRadius méthode vous permet de spécifier la taille de l'effet de flou appliqué aux bords de l'ombre. Plus ce nombre, le plus floue l'ombre apparaîtra. Vous pouvez également contrôler la propagation, qui indique quelle partie du flou de l'ombre doit être de couleur unie avant que les coups de pied à effet de flou dans.

Ce chiffre montre une application JavaFX qui démontre neuf variations de l'ombre portée de base.

Pour créer ces rectangles ombragés, une méthode utilitaire nommé createShadowedBox a été créé. Voici le code pour cette méthode:

Rectangle createShadowedBox (taille double, à double ShadowWidth, double shadowHeight, double offsetX, double offsetY, double rayon) {Rectangle r = new Rectangle (taille, taille) -r.setFill (Color.LIGHTGRAY) -r.setStroke (Color.BLACK) -r.setStrokeWidth (2) -DropShadow e = new DropShadow()-e.setWidth(shadowWidth)-e.setHeight(shadowHeight)-e.setOffsetX(offsetX)-e.setOffsetY(offsetY)-e.setRadius(radius)-r.setEffect(e)-return r-}

Comme vous pouvez le voir, cette méthode accepte six paramètres: la taille du rectangle à créer (le rectangle est en fait un carré, donc la taille est utilisée à la fois pour la largeur et la hauteur), la largeur et la hauteur de l'ombre, l'x - et y compensations pour l'ombre, et le rayon de flou de l'ombre.

Le procédé commence par la création d'un rectangle. Puis, il crée une ombre portée, applique la largeur, la hauteur, décalage x, y-offset, et le rayon, puis applique l'effet du rectangle et renvoie le rectangle.

Pour créer les rectangles ombragés réels, la createShadowBox méthode a été appelée neuf fois, en utilisant différentes valeurs de paramètres:

R1 = createShadowedBox Rectangle (100, 10, 10, 5, 5, 10) -Rectangle r2 = createShadowedBox (100, 20, 20, 10, 10, 10) -Rectangle r3 = createShadowedBox (100, 30, 30, 15, 15 , 10) -Rectangle r4 = createShadowedBox (100, 20, 20, 0, 0, 10) -Rectangle r5 = createShadowedBox (100, 20, 20, 0, 10, 10) -Rectangle r6 = createShadowedBox (100, 20, 20 , 10, 0, 10) -Rectangle r7 = createShadowedBox (100, 20, 20, 10, 10, 0) = r8 -Rectangle createShadowedBox (100, 20, 20, 10, 10, 20) -Rectangle r9 = createShadowedBox (100 , 20, 20, 10, 10, 50) -

Pour la première série de trois, la taille et le décalage de l'ombre était variée, dans chacun, en utilisant les mêmes valeurs pour la hauteur et la largeur et pour le décalage x et le décalage y. Ainsi, la première ligne de rectangles sur la figure montrent divers placements de l'ombre en dessous et à droite des rectangles.

Pour la prochaine série de trois, le décalage X-Y-offset ou a été mis à zéro pour démontrer les variations de l'offset. Et pour la dernière série de trois, le rayon était varié. Notez que lorsque le rayon est réglé sur 0, les bords de l'ombre sont nettes. Avec des valeurs de rayon plus grand, l'ombre devient plus floue.

Cette figure montre comment intérieure ombres fonctionnent. Pour cette figure, une seule ligne de code a été modifié dans le createShadowBox Procédé: lieu de créer une DropShadow, un InnerShadow a été créé:

InnerShadow e = new InnerShadow () -

Comme vous pouvez le voir, le InnerShadow classe met l'ombre à l'intérieur du rectangle, plutôt que sur l'extérieur.