Les effets (effects) dans JavaFX

View more Tutorials:

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= "//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 = "//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 = "//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).
  1. La propriété angle sert à définir la direction du mouvement de l'objet en mouvement.
  2. 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 :

View more Tutorials: