FAQ JavaFXConsultez toutes les FAQ
Nombre d'auteurs : 4, nombre de questions : 86, dernière mise à jour : 18 mai 2009
Sommaire→SceneGraph→Noeuds→Effets
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.
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).
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
}
}
}
}
Pour rajouter une ombre portée à notre rectangle, il suffit
de lui donner un effet javafx.scene.effect.DropShadow.
Par exemple :
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 :
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
}
}
}
}
Pour faire que notre rectangle apparaisse flouté,
il suffit lui donner un effet javafx.scene.effect.GaussianBlur.
Par exemple :
effect: GaussianBlur {
radius: 20
}
Ce qui nous donne le code suivant :
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
}
}
}
}
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 :
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 :
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
}
}
}
}
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.
