Les FAQs Java :
FAQ JAVA FAQ Java EE FAQ Java ME FAQ Java XML FAQ JavaFX FAQ Java GUI FAQ Struts FAQ JSF FAQ JDBC JDO FAQ Hibernate FAQ Spring FAQ Eclipse FAQ NetBeans FAQ JCreator FAQ Maven 2

FAQ JavaFXConsultez toutes les FAQ

Nombre d'auteurs : 4, nombre de questions : 86, dernière mise à jour : 2 juillet 2013 

 
OuvrirSommaireSceneGraphNoeudsEffets

Les effets sont des classes proposant des effets graphiques à appliquer aux formes ou à la scène que vous désirez afficher. Ils sont définis dans le package javafx.scene.effect et ses sous-packages.
Ce dernier contient les effets de base qui permettent de faire, entre autre, des ombres portées ou du flou ou encore l'illumination d'un objet ou de la scène permettant ainsi de rendre plus réaliste cette dernière en faisant varier son éclairage.

Ces effets reposent la plupart du temps sur la création d'images bitmap intermédiaires. Ils peuvent être gourmands tant en ressource CPU qu'en mémoire.

Créé le 27 janvier 2009  par bouye

Il est possible de mettre un effet sur chaque Node de la scène en spécifiant son champ effect.

Note : dans les exemples suivants, nous partirons de ce code qui affiche un rectangle aux coins arrondis dans une fenêtre non-décorée dont le fond est transparent.
Le rectangle possitionné en (50, 50) et de taille 200x100 est colorié avec un gradient linaire qui va du rouge au rouge foncé.
Ce gradient colle aux extrémités du rectangle (utile si on redimensionne ce dernier).

 
Sélectionnez

import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
 
Stage {
    title: "Test d'effet"
    width: 300
    height: 200
    style: StageStyle.TRANSPARENT;
    scene: Scene {
        fill: Color.TRANSPARENT
        content: Rectangle {
            x: 50, y: 50
            width: 200, height: 100
            arcWidth: 20, arcHeight: 20
            fill: LinearGradient {
                startX: 0, startY: 0
                endX: 0, endY: 1
                proportional: true
                stops: [
                    Stop {
                        offset: 0.0
                        color: Color.RED},
                    Stop {
                        offset: 1.0
                        color: Color.DARKRED}
                ] // stops
            
            }
        }
    }
}
 
Image non disponible
Créé le 27 janvier 2009  par bouye

Pour rajouter une ombre portée à notre rectangle, il suffit de lui donner un effet javafx.scene.effect.DropShadow.
Par exemple :

 
Sélectionnez

 effect: DropShadow {
                offsetX:10, offsetY: 10
                radius: 50
                spread: 0
            }

Nous avons ici défini une ombre décalée de (+10, +10) par rapport à notre rectangle d'origine, sur laquelle nous allons appliquer un flou gaussien de 50. La notion de spread est un peu plus complexe; il s'agit de la position relative à partir de la quelle l'ombre devient floue. Cette valeur est comprise entre 0 (l'ombre est complètement floue) et 1 (l'ombre n'est pas du tout floue).

Vous remarquerez qu'il n'est pas possible de faire varier l'opacité de l'ombre. Pour cela il faudra faire varier la transparence de la couleur utilisée pour cette ombre ; cette couleur peut-être spécifiée via le champ color (la valeur par défaut est Color.BLACK).

Comme la forme de l'ombre va déborder largement de celle du rectangle, vous devez prévoir une taille de fenêtre suffisante sinon l'ombre sera coupée à l'endroit où la fenêtre se termine (même si cette dernière est non-décorée).

Ce qui nous donne le code suivant :

 
Sélectionnez

 
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
 
Stage {
    title: "Test d'ombre portee "
    width: 300
    height: 200
    style: StageStyle.TRANSPARENT;
    scene: Scene {
        fill: Color.TRANSPARENT
        content: Rectangle {
            x: 50, y: 50
            width: 200, height: 100
            arcWidth: 20, arcHeight: 20
            fill: LinearGradient {
                startX: 0, startY: 0
                endX: 0, endY: 1
                proportional: true
                stops: [
                    Stop {
                        offset: 0.0
                        color: Color.RED},
                    Stop {
                        offset: 1.0
                        color: Color.DARKRED}
                ] // stops
            
            }
            effect: DropShadow {
                offsetX:10, offsetY: 10
                radius: 50
                spread: 0
            }
        }
    }
}
Image non disponible
Créé le 27 janvier 2009  par bouye

Pour faire que notre rectangle apparaisse flouté, il suffit lui donner un effet javafx.scene.effect.GaussianBlur.
Par exemple :

 
Sélectionnez

 effect: GaussianBlur {
                radius: 20
            }

Ce qui nous donne le code suivant :

 
Sélectionnez

 
import javafx.scene.effect.GaussianBlur;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
 
Stage {
    title: "Test de flou gaussien "
    width: 300
    height: 200
    style: StageStyle.TRANSPARENT;
    scene: Scene {
        fill: Color.TRANSPARENT
        content: Rectangle {
            x: 50, y: 50
            width: 200, height: 100
            arcWidth: 20, arcHeight: 20
            fill: LinearGradient {
                startX: 0, startY: 0
                endX: 0, endY: 1
                proportional: true
                stops: [
                    Stop {
                        offset: 0.0
                        color: Color.RED},
                    Stop {
                        offset: 1.0
                        color: Color.DARKRED}
                ] // stops
            
            }
            effect: GaussianBlur {
                radius: 20
            }
        }
    }
}
Image non disponible
Créé le 27 janvier 2009  par bouye

Pour faire varier les couleurs de notre rectangle, il suffit lui donner un effet javafx.scene.effect.ColorAdjust.
Cette classe permet de faire varier les couleurs des pixels du Node source.
Par exemple :

 
Sélectionnez

 effect: ColorAdjust {
                hue: 0.5
                brightness : 0.5
            }

Ici nous faisons varier la composante hue (teinte) de la couleur, ce qui transformera notre rectangle rouge en un rectangle vert. Nous l'avons de plus éclairci en modifiant sa brightness (luminescence).

Ce qui nous donne le code suivant :

 
Sélectionnez

 
import javafx.scene.effect.ColorAdjust;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
 
Stage {
    title: "Test de variation des couleurs"
    width: 300
    height: 200
    style: StageStyle.TRANSPARENT;
    scene: Scene {
        fill: Color.TRANSPARENT
        content: Rectangle {
            x: 50, y: 50
            width: 200, height: 100
            arcWidth: 20, arcHeight: 20
            fill: LinearGradient {
                startX: 0, startY: 0
                endX: 0, endY: 1
                proportional: true
                stops: [
                    Stop {
                        offset: 0.0
                        color: Color.RED},
                    Stop {
                        offset: 1.0
                        color: Color.DARKRED}
                ] // stops
            
            }
          effect: ColorAdjust {
                hue: 0.5
                brightness : 0.5
            }
        }
    }
}
Image non disponible

Par contre vous pouvez remarquer un petit problème dans les coins (normalement transparents) de notre rectangle : ceux-ci sont devenus blancs semi-transparents. Apparemment il s'agit là d'un bug de jeunesse de JavaFX, si on enlève le changement de luminosité, les coins restent cependant transparents quand le rectangle devient vert.

Image non disponible
Créé le 27 janvier 2009  par bouye
Les codes sources sont, sauf mention spéciale, libres de droits, et vous pouvez les utiliser à votre convenance. Pour le reste, ce document constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2009 Developpez LLC : Tous droits réservés Developpez LLC. Aucune reproduction, ne peux en être faite sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.