Les effets (effects) dans JavaFX

Aperçu des effets
ColorInput
ImageInput
BoxBlur
ColorAdjust
Gaussian Blur
Bloom Effect
Drop Shadow
Motion Blur
Reflection

1. Aperçu des effets

Un effet (Effect) est une action sur une image graphique (Graphic image) pour créer une autre image graphique. L'un des effets que vous rencontrez habituellement est l'effet de flou (Motion Blur) de mouvement, l'effet d'ombre portée(Drop Shadow) , etc.

Motion Blur Effect (Effet de flou):

Drop Shadow Effect (Effet d'ombre portée):

En JavaFX un effet (effect) peut être appliqué à un objet dont le type est Node, via la méthode Node.setEffect(effect).

JavaFX a construit quelques classes d'effets, pour différents effets, qui sont tous dans le package (package) javafx.scene.effect. Voici sont quelques classes dans ce package.

Blend
Bloom
BoxBlur
ColorAdjust
ColorInput
DropShadow
GaussianBlur
Glow
ImageInput
InnerShadow
Lighting
MotionBlur
PerspectiveTransform
Reflection
SepiaTone
Shadow

2. ColorInput

ColorInput est un effet utilisé pour le rendu (render) d'un rectangle rempli (fill) par couleur sur un objet affecté. Cet effet masquera complètement l'objet affecté.

ColorInput est généralement utilisé avec d'autres effets pour créer un effet mixte et s'applique à un arrière-plan (background).

Exemple:

Dans l'exemple suivant, un Button est défini sur l'effet ColorInput. Il est complètement caché. Vous ne voyez qu'un rectangle coloré.

ColorInputEffectExample.java

package org.o7planning.javafx.effect;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.ColorInput;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class ColorInputEffectExample extends Application {

   @Override
   public void start(Stage stage) {

      double x = 10;
      double y = 10;
      double w = 40;
      double h = 180;
      
      // Rectangle
      Rectangle rect = new Rectangle(x, y, w, h);
      rect.setFill(Color.WHITE);
      rect.setStrokeWidth(1);
      rect.setStroke(Color.BLACK);
      
      // Button
      Button button = new Button("Click me to apply ColorInput effect to me");

      button.setLayoutX(100);
      button.setLayoutY(30);

      button.setPrefSize(250, 150);

      button.setOnAction(new EventHandler<ActionEvent>() {

         @Override
         public void handle(ActionEvent event) {
            ColorInput colorInput = new ColorInput();
            colorInput.setPaint(Color.STEELBLUE);
            colorInput.setX(x);
            colorInput.setY(y);
            colorInput.setWidth(w);
            colorInput.setHeight(h);

            // Setting ColorInput effect
            button.setEffect(colorInput);
         }
      });

      Group root = new Group();

      root.getChildren().addAll(button, rect);

      Scene scene = new Scene(root, 450, 300);
      stage.setTitle("JavaFX ColorInput Effect (o7planning.org)");
      stage.setScene(scene);

      stage.show();

   }

   public static void main(String args[]) {
      launch(args);
   }
   
}

3. ImageInput

ImageInput est un effet utilisé pour le rendu (render) d'une image sur un objet (image) affecté. Cet effet masquera complètement l'objet affecté.

ImageInput est générallement combiné avec d'autres effets pour créer un effet mixte et s'applique à un arrière-plan (background).

Par exemple:

Dans l'exemple ci-dessous, un Button est défini l'effet ImageInput. Il sera complètement caché, vous ne verrez qu'une image (image).

ImageInputEffectExample.java

package org.o7planning.javafx.effect;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.ImageInput;
import javafx.scene.image.Image;
import javafx.stage.Stage;

public class ImageInputEffectExample extends Application {

   @Override
   public void start(Stage stage) {

      double x = 10;
      double y = 10;

      // Button
      Button button = new Button("Click me to apply ImageInput effect to me");

      button.setLayoutX(100);
      button.setLayoutY(30);

      button.setPrefSize(250, 50);

      button.setOnAction(new EventHandler<ActionEvent>() {

         @Override
         public void handle(ActionEvent event) {
            String imageUrl= "http://o7planning.org/templates/o7planning/resources/images/favi.png";
            Image image = new Image(imageUrl);

            ImageInput imageInput = new ImageInput();
            imageInput.setSource(image);
            imageInput.setX(x);
            imageInput.setY(y);

            // Setting ColorInput effect
            button.setEffect(imageInput);
         }
      });

      Group root = new Group();

      root.getChildren().addAll(button );

      Scene scene = new Scene(root, 450, 250);
      stage.setTitle("JavaFX ImageInput Effect (o7planning.org)");
      stage.setScene(scene);

      stage.show();

   }

   public static void main(String args[]) {
      launch(args);
   }

}

4. BoxBlur

Par exemple :

BoxBlurEffectExample.java

package org.o7planning.javafx.effect;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.BoxBlur;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class BoxBlurEffectExample extends Application {

    @Override
    public void start(Stage stage) {

        double x = 10;
        double y = 150;

        Text text = new Text();
        text.setText("Blurry Text!");
        text.setFill(Color.web("0x3b596d"));
        text.setFont(Font.font(null, FontWeight.BOLD, 70));
        text.setX(x);
        text.setY(y);

        BoxBlur boxBlur = new BoxBlur();

        // Min: 0.0 Max: 255.0
        boxBlur.setWidth(10);

        // Min: 0.0 Max: 255.0
        boxBlur.setHeight(5);

        // Min: 0 Max: 3
        boxBlur.setIterations(3);
        text.setEffect(boxBlur);

        Group root = new Group();

        root.getChildren().addAll(text);

        Scene scene = new Scene(root, 450, 250);
        stage.setTitle("JavaFX BoxBlur Effect (o7planning.org)");
        stage.setScene(scene);

        stage.show();

    }

    public static void main(String args[]) {
        launch(args);
    }

}

5. ColorAdjust

Vous pouvez ajuster la couleur d'une image en appliquant un effet de réglage de la couleur (Color adjust efffect). Pour ajuster la couleur de l'image, vous devez ajuster les cinq propriétés (property) suivantes:

hue
saturation
brightness
contrast

Toutes les propriétés ci-dessus peuvent s'appliquer à chaque pixel différent (point de décomposition).

Propriété	Description
hue	hue est une propriété du type double, dont le champ de la valeur se trouve entre -1..1. Elle représente des valeurs de réglage de la couleur (hue) pour cet effet.
saturation	saturation est une propriété du type double, dont le champ de la valeur se trouve entre -1..1, elle représente pour les valeurs d'ajustement de la saturation (saturation) pour cet effet.
brightness	brightness est une propriété du type double, dont le champ de la valeur se trouve entre -1..1, elle représente la luminosité (brightness) pour cet effet.
contrast	contrast est une propriété du type double, dont le champ de la valeur se trouve entre -1..1, elle représente le contraste (contrast) pour cet effet.

Par exemple:

ColorAdjustEffectExample.java

package org.o7planning.javafx.effect;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

public class ColorAdjustEffectExample extends Application {

   @Override
   public void start(Stage stage) {

      String imageUrl = "http://o7planning.org/templates/o7planning/resources/images/favi.png";
      Image image = new Image(imageUrl);

      ImageView imageView1 = new ImageView(image);
      imageView1.setX(100);
      imageView1.setY(20);

      ImageView imageView2 = new ImageView(image);

      imageView2.setX(100);
      imageView2.setY(170);

      // Create the ColorAdjust
      ColorAdjust colorAdjust = new ColorAdjust();

      // Setting the contrast value
      colorAdjust.setContrast(0.3);

      // Setting the hue value
      colorAdjust.setHue(-0.05);

      // Setting the brightness value
      colorAdjust.setBrightness(0.9);

      // Setting the saturation value
      colorAdjust.setSaturation(0.7);

      // Applying ColorAdjust effect to the ImageView node
      imageView2.setEffect(colorAdjust);

      Group root = new Group(imageView1, imageView2);

      Scene scene = new Scene(root, 450, 320);
      stage.setTitle("JavaFX ColorAdjust Effect (o7planning.org)");
      stage.setScene(scene);
      stage.show();
   }

   public static void main(String args[]) {
      launch(args);
   }

}

Exécutez l'exemple :

Exemple 2:

Un autre exemple vous permet d'ajouter la propriété de hue, saturation, brightness et contrast via des Slider:

ColorAdjustEffectExample2.java

package org.o7planning.javafx.effect;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ColorAdjustEffectExample2 extends Application {

   private static final int ADJUST_TYPE_HUE = 1;
   private static final int ADJUST_TYPE_CONTRAST = 2;
   private static final int ADJUST_TYPE_SATURATION = 3;
   private static final int ADJUST_TYPE_BRIGHTNESS = 4;

   private ColorAdjust colorAdjust;

   @Override
   public void start(Stage stage) {

      Label contrastLabel = new Label("Contrast:");
      Label hueLabel = new Label("Hue:");
      Label saturationLabel = new Label("Saturation:");
      Label brightnessLabel = new Label("Brightness:");

      Slider contrastSlider = this.createSlider(ADJUST_TYPE_CONTRAST);
      Slider hueSlider = this.createSlider(ADJUST_TYPE_HUE);
      Slider saturationSlider = this.createSlider(ADJUST_TYPE_SATURATION);
      Slider brightnessSlider = this.createSlider(ADJUST_TYPE_BRIGHTNESS);

      String imageUrl = "http://o7planning.org/templates/o7planning/resources/images/favi.png";
      Image image = new Image(imageUrl);

      ImageView imageView = new ImageView(image);

      // Create the ColorAdjust
      colorAdjust = new ColorAdjust();

      // Applying ColorAdjust effect to the ImageView node
      imageView.setEffect(colorAdjust);

      VBox root = new VBox();
      root.setPadding(new Insets(10));

      root.getChildren().addAll(contrastLabel, contrastSlider, //
            hueLabel, hueSlider, //
            saturationLabel, saturationSlider, //
            brightnessLabel, brightnessSlider, imageView);

      Scene scene = new Scene(root, 450, 320);
      stage.setTitle("JavaFX ColorAdjust Effect (o7planning.org)");
      stage.setScene(scene);
      stage.show();
   }

   // Create Slider to Adjust Color
   private Slider createSlider(final int adjustType) {
      Slider slider = new Slider();
      slider.setMin(-1);
      slider.setMax(1);
      slider.setBlockIncrement(0.1);
      slider.setValue(0);

      slider.valueProperty().addListener(new ChangeListener<Number>() {

         @Override
         public void changed(ObservableValue<? extends Number> observable, //
               Number oldValue, Number newValue) {
            switch (adjustType) {
            case ADJUST_TYPE_HUE:
               colorAdjust.setHue(newValue.doubleValue());
               break;
            case ADJUST_TYPE_CONTRAST:
               colorAdjust.setContrast(newValue.doubleValue());
               break;
            case ADJUST_TYPE_SATURATION:
               colorAdjust.setSaturation(newValue.doubleValue());
               break;
            case ADJUST_TYPE_BRIGHTNESS:
               colorAdjust.setBrightness(newValue.doubleValue());
               break;
            }
         }
      });
      return slider;
   }

   public static void main(String args[]) {
      launch(args);
   }

}

6. Gaussian Blur

L'effet Gaussian Blur (L'effet de flou Gaussian) utilise l'algorithme Gaussian afin de créer l'effet de flou qui permet de configurer la propriété (property) radius.

La propriété radius est le rayon du cercle de flou entourant chaque point de l'objet géométrique qui définit cet effet..

Par exemple :

GaussianBlurEffectExample.java

package org.o7planning.javafx.effect;

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;

public class GaussianBlurEffectExample extends Application {

	// 30 millisencond.
	private static final int UI_ANIMATION_TIME_MSEC = 30000;

	private static final double MIN_RADIUS = 0.0;
	private static final double MAX_RADIUS = 70.0;

	private void applyEffect(Node node) {
		// Create Gaussian Blur effect with radius = 0
		GaussianBlur blur = new GaussianBlur(MIN_RADIUS);
		node.setEffect(blur);

		// Create animation effect
		Timeline timeline = new Timeline();
		KeyValue kv = new KeyValue(blur.radiusProperty(), MAX_RADIUS);
		KeyFrame kf = new KeyFrame(Duration.millis(UI_ANIMATION_TIME_MSEC), kv);
		timeline.getKeyFrames().add(kf);
		timeline.play();
	}

	@Override
	public void start(Stage stage) {

		Text text = new Text();
		text.setX(120.0);
		text.setY(150.0);
		text.setText("!");
		text.setFill(Color.web("0x3b596d"));
		text.setFont(Font.font(null, FontWeight.BOLD, 160));

		this.applyEffect(text);

		Group root = new Group();

		root.getChildren().addAll(text);

		Scene scene = new Scene(root, 450, 250);
		stage.setTitle("JavaFX Gaussian Blur Effect (o7planning.org)");
		stage.setScene(scene);

		stage.show();

	}

	public static void main(String args[]) {
		launch(args);
	}

}

Exécutez l'exemple :

7. Bloom Effect

Bloom (Éblouissement) est un effet, qui est comme le sentiment lorsque vous regardez une source de lumière forte. Vous pouvez définir un seuil (Threshold) pour le bloom de l'effet qui est un nombre dans la plage de 0..1.

Par exemple:

Dans l'exemple ci-dessous, un objet Text est défini l'effet Bloom (effet d'éblouissement).

BloomEffectExample.java

package org.o7planning.javafx.effect;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.effect.Bloom;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class BloomEffectExample extends Application {

   @Override
   public void start(Stage stage) {

      Label label = new Label();
      label.setLayoutX(10);
      label.setLayoutY(50);

      Rectangle rect = new Rectangle();
      rect.setX(10);
      rect.setY(70);
      rect.setWidth(360);
      rect.setHeight(80);
      rect.setFill(Color.DARKSLATEBLUE);

      Text text = new Text();
      text.setText("Bloom!");
      text.setFill(Color.ALICEBLUE);
      text.setFont(Font.font(null, FontWeight.BOLD, 40));
      text.setX(25);
      text.setY(125);

      // Create Bloom Effect
      Bloom bloom = new Bloom();
      // Setting Threshold
      bloom.setThreshold(0.8);
      text.setEffect(bloom);

      Button plusButton = new Button("+");
      plusButton.setLayoutX(50);
      plusButton.setLayoutY(10);
      plusButton.setOnAction(new EventHandler<ActionEvent>() {

         @Override
         public void handle(ActionEvent event) {
            double threshold = bloom.getThreshold();
            threshold += 0.1;
            if (threshold > 1) {
               threshold = 1;
            }
            bloom.setThreshold(threshold);
            label.setText("Threshold: " + threshold);
         }
      });

      Button minusButton = new Button("-");
      minusButton.setLayoutX(10);
      minusButton.setLayoutY(10);
      minusButton.setOnAction(new EventHandler<ActionEvent>() {

         @Override
         public void handle(ActionEvent event) {
            double threshold = bloom.getThreshold();
            threshold -= 0.1;
            if (threshold < 0) {
               threshold = 0;
            }
            bloom.setThreshold(threshold);
            label.setText("Threshold: " + threshold);
         }
      });
      Group root = new Group();

      root.getChildren().addAll(rect, text, label, minusButton, plusButton);

      Scene scene = new Scene(root, 450, 250);
      stage.setTitle("JavaFX Bloom Effect (o7planning.org)");
      stage.setScene(scene);

      stage.show();

   }

   public static void main(String args[]) {
      launch(args);
   }

}

8. Drop Shadow

Drop Shadow est un effet de haut niveau (hight level), qui crée une ombre pour un objet géométrique.

Drop Shadow Effect (L'effet d'ombre portée) a 3 propriétés (property) importantes que vous devez établir sont:

Offset (Offset x, Offset y)
Radius (Rayon du cercle flou)
Color (Couleur de l'ombre portée)

Offset

Radius (Le rayon)

Chaque point de l'objet créera son point d'ombre. Ce point d'ombre est le centre d'un cercle de flou. Vous pouvez définir un rayon pour ce cercle.

Par exemple:

DropShadowEffectExample.java

package org.o7planning.javafx.effect;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class DropShadowEffectExample extends Application {

    @Override
    public void start(Stage stage) {

        DropShadow dropShadow = new DropShadow();
        dropShadow.setRadius(5.0);
        dropShadow.setOffsetX(3.0);
        dropShadow.setOffsetY(3.0);
        dropShadow.setColor(Color.color(0.4, 0.5, 0.5));

        Text text = new Text();
        text.setCache(true);
        text.setX(10.0);
        text.setY(70.0);
        text.setFill(Color.web("0x3b596d"));
        text.setText("JavaFX Drop Shadow...");
        text.setFont(Font.font(null, FontWeight.BOLD, 40));
        
        text.setEffect(dropShadow);

        DropShadow dropShadow2 = new DropShadow();
        dropShadow2.setOffsetX(70.0);
        dropShadow2.setOffsetY(45.0);
        dropShadow2.setRadius(20);

        Rectangle rect = new Rectangle(20, 150, 250, 100);
        rect.setFill(Color.STEELBLUE);
        rect.setCache(true);
        
        rect.setEffect(dropShadow2);

        Group root = new Group();

        root.getChildren().addAll(rect, text);

        Scene scene = new Scene(root, 450, 350);
        stage.setTitle("JavaFX Drop Shadow Effect (o7planning.org)");
        stage.setScene(scene);

        stage.show();

    }

    public static void main(String args[]) {
        launch(args);
    }

}

Exécutez l'exemple :

9. Motion Blur

Motion Blur effect (L'effet de flou) tilise le noyau (kernel) qui est un algorithme Gaussian pour créer un effet de flou et permet de configurer les propriétés (property) telles que le rayon (radius) et l'angle (angle).

La propriété angle sert à définir la direction du mouvement de l'objet en mouvement.
La propriété radius est le rayon du cercle de flou entourant chaque point de l'objet qui bouge.

Exemple 1:

MotionBlurEffectExample.java

package org.o7planning.javafx.effect;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.MotionBlur;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class MotionBlurEffectExample extends Application {

    @Override
    public void start(Stage stage) {

        MotionBlur motionBlur = new MotionBlur();
        motionBlur.setRadius(55);
        motionBlur.setAngle(150.0);

        Text text = new Text();
        text.setX(120.0);
        text.setY(150.0);
        text.setText("!");
        text.setFill(Color.web("0x3b596d"));
        text.setFont(Font.font(null, FontWeight.BOLD, 160));
        text.setEffect(motionBlur);

        Group root = new Group();

        root.getChildren().addAll(text);

        Scene scene = new Scene(root, 450, 250);
        stage.setTitle("JavaFX Motion Blur Effect (o7planning.org)");
        stage.setScene(scene);

        stage.show();

    }

    public static void main(String args[]) {
        launch(args);
    }

}

Exécutez l'exemple :

10. Reflection

Reflection (Réflexion) est un effet qui crée une image de réflexion d'un objet d'entrée comme si vous étiez devant un miroir.

Il y a quatre propriétés (property) importantes pour l'effet de réflexion:

topOpacity
bottomOpacity
topOffset
fraction
input

Propriété	Description
topOpacity	topOpacity est la propriété du type double dont le champ de la valeur se trouve dans 0..1, la valeur par défaut est 0, cette valeur représente l'opacité (opacity) de l'image de réflexion en haut de lui.
bottomOpacity	bottomOpacity est la propriété du type double, dont le champ de la valeur se trouve dans 0..1, la valeur par défaut est 0, cette valeur représente l'opacité (opacity) de l'image de réflexion au fond de lui.
topOffset	topOffset est la propriété du type double, elle est la distance entre le point au fond de l'objet et le point en haut de l'image de réflexion.
fraction	fraction est la propriété du type double, dont le champ de la valeur se trouve dans 0..1, la valeur par défaut est 0.75 (75%). Si cette valeur passe à 1 (100%), les points proches des points supérieurs de l'objet auront une image de réflexion. (Voir l'illustration ci-dessous).
input

Par exemple :

ReflectionEffectExample.java

package org.o7planning.javafx.effect;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.Reflection;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class ReflectionEffectExample extends Application {

   @Override
   public void start(Stage stage) {

      Reflection reflection = new Reflection();

      // Setting the bottom opacity of the reflection
      reflection.setBottomOpacity(0.0);

      // Setting the top opacity of the reflection
      reflection.setTopOpacity(0.5);

      // Setting the top offset of the reflection
      reflection.setTopOffset(10);

      // Setting the fraction of the reflection
      reflection.setFraction(0.7);

      Text text = new Text();
      text.setX(20.0);
      text.setY(90.0);

      text.setCache(true);
      text.setText("JavaFX");
      text.setFill(Color.web("0x3b596d"));
      text.setFont(Font.font(null, FontWeight.BOLD, 80));

      text.setEffect(reflection);

      Group root = new Group();

      root.getChildren().addAll(text);

      Scene scene = new Scene(root, 450, 250);
      stage.setTitle("JavaFX Reflection Effect (o7planning.org)");
      stage.setScene(scene);

      stage.show();

   }

   public static void main(String args[]) {
      launch(args);
   }
}

Exécutez l'exemple :

Les effets (effects) dans JavaFX

1. Aperçu des effets

2. ColorInput

3. ImageInput

4. BoxBlur

5. ColorAdjust

6. Gaussian Blur

7. Bloom Effect

8. Drop Shadow

9. Motion Blur

10. Reflection

Tutoriels de JavaFX

Tutoriels de JavaFX

Articles les plus récents