JavaFX效果

时间:2020-01-09 10:36:36  来源:igfitidea点击:

JavaFX效果是一种图形效果,可以将其应用于JavaFX应用程序中的控件,以使应用程序GUI看起来更有趣。 JavaFX内置了以下效果:

  • 落影 (Drop Shadow)
  • 内部阴影 (Inner Shadow)
  • 阴影 (Shadow)
  • 反射 (Reflection)
  • BoxBlur (BoxBlur)
  • 高斯模糊 (GaussianBlur)
  • 运动模糊 (MotionBlur)
  • 盛开 (Bloom)
  • 辉光 (Glow)
  • 棕褐色调 (SepiaTone)
  • 位移图 (DisplacementMap)
  • 色彩输入 (ColorInput)
  • 影像输入 (ImageInput)
  • 混合 (Blend)
  • 灯光 (Lighting)
  • 透视变换 (PerspectiveTransform)

甚至可能有一些我没有提到的效果。在以下各节中,我将介绍其中的一些JavaFX效果。

JavaFX效果示例

在深入研究每种内置JavaFX效果之前,让我向我们展示一个简单的示例,说明将效果应用于JavaFX控件有多么简单。下面的示例将DropShadow效果添加到Circle形状,然后将其显示在Pane内部:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class EffectsExample extends Application {

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

  public void start(Stage primaryStage) {

    Circle circle = new Circle(50, 150, 50, Color.RED);

    circle.setEffect(
        new DropShadow(1, 20, 30, Color.web("#333333")));

    Scene scene = new Scene(new Pane(circle), 300, 250);
    primaryStage.setScene(scene);
    primaryStage.show();

  }
}

将效果应用于JavaFX节点

我们可以通过NodesetEffect()方法将效果应用于添加到JavaFX Scene Graph的任何JavaFX Node。这是一个例子:

circle.setEffect(
    new DropShadow(1, 20, 30, Color.web("#333333")));

落影

最有用的JavaFX效果之一是阴影效果。阴影效果由JavaFX类javafx.scene.effect.DropShadow提供。 DropShadow类采用以下参数来指定投影的外观:

  • 半径
  • X偏移
  • Y偏移
  • 颜色

所有这些参数都是可选的。但是,在大多数情况下,我们将需要设置它们的值以使阴影提供所需的效果。我们可以在实例化DropShadow对象时通过构造函数设置这些参数,也可以在DropShadow对象上通过指定的方法设置这些参数。

radius参数指定阴影边缘将如何"散布"。 X offset和Y offset参数指定将阴影效果应用到JavaFX Node的距离,以绘制阴影。 color参数指定投影的颜色。

这是三个JavaFX Circle对象的示例,这些对象应用了不同的阴影效果,这些对象演示了在DropShadow上设置的不同参数。我们将在代码示例后找到屏幕截图,以直观方式显示效果。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class EffectsExample extends Application {

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

    public void start(Stage primaryStage) {

        DropShadow dropShadow1 = new DropShadow();
        dropShadow1.setRadius(1);
        dropShadow1.setOffsetX(10);
        dropShadow1.setOffsetY(10);
        dropShadow1.setColor(Color.web("#333333"));

        Circle circle1 = new Circle(75, 75, 50, Color.RED);
        circle1.setEffect(dropShadow1);

        DropShadow dropShadow2 = new DropShadow();
        dropShadow2.setRadius(5);
        dropShadow2.setOffsetX(20);
        dropShadow2.setOffsetY(20);
        dropShadow2.setColor(Color.web("#660066"));

        Circle circle2 = new Circle(200, 75, 50, Color.GREEN);
        circle2.setEffect(dropShadow2);

        DropShadow dropShadow3= new DropShadow();
        dropShadow3.setRadius(25);
        dropShadow3.setOffsetX(30);
        dropShadow3.setOffsetY(30);
        dropShadow3.setColor(Color.web("#006666"));

        Circle circle3 = new Circle(325, 75, 50, Color.BLUE);
        circle3.setEffect(dropShadow3);

        Scene scene = new Scene(new Pane(circle1, circle2, circle3), 425, 175);
        primaryStage.setScene(scene);
        primaryStage.show();

    }
}

反射

JavaFX反射效果向JavaFX节点添加了类似镜像的反射。反射效果由类javafx.scene.effect.Reflection提供。 Reflection类采用以下影响结果反射的参数:

  • topOffset
  • 不透明度
  • bottomOpacity
  • 分数

" topOffset"参数指定了将反射效果应用到"节点"的距离,反射的顶部将被定位。参数topOpacity和bottomOpacity在反射的顶部和底部指定反射的不透明度(从0到1)。 fraction参数指定反射中包含多少节点(从0到1)。

这是显示如何将JavaFX反射效果应用于文本节点的示例:

import javafx.application.Application;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.effect.Reflection;
import javafx.scene.layout.Pane;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class EffectsExample extends Application {

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

    public void start(Stage primaryStage) {

        Text text = new Text("Reflection Effect");
        text.setLayoutX(30);
        text.setLayoutY(20);
        text.setTextOrigin(VPos.TOP);
        text.setFont(Font.font("Arial", FontWeight.BOLD, 40));

        Reflection reflection = new Reflection();
        reflection.setTopOffset(0);
        reflection.setTopOpacity(0.75);
        reflection.setBottomOpacity(0.10);
        reflection.setFraction(0.7);

        text.setEffect(reflection);

        Scene scene = new Scene(new Pane(text), 425, 175);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

高斯模糊

JavaFX高斯模糊效果会模糊应用它的JavaFX节点。 JavaFX高斯模糊效果由类javafx.scene.effect.GaussianBlur提供。 GaussianBlur类采用一个名为" radius"的参数,该参数确定模糊效果的"宽度"。半径越宽,高斯模糊效果将使目标节点模糊。这是一个代码示例,显示了两个具有高斯模糊效果的JavaFX Text控件,它们具有不同的半径,因此我们可以看到不同之处(稍后截图):

import javafx.application.Application;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.layout.Pane;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class EffectsExample extends Application {

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

    public void start(Stage primaryStage) {

        GaussianBlur blur = new GaussianBlur();
        blur.setRadius(5);

        Text text1 = new Text("Blur Effect 1");
        text1.setLayoutX(30);
        text1.setLayoutY(20);
        text1.setTextOrigin(VPos.TOP);
        text1.setFont(Font.font("Arial", FontWeight.BOLD, 40));
        text1.setEffect(blur);

        GaussianBlur blur2 = new GaussianBlur();
        blur2.setRadius(10);

        Text text2 = new Text("Blur Effect 2");
        text2.setLayoutX(30);
        text2.setLayoutY(100);
        text2.setTextOrigin(VPos.TOP);
        text2.setFont(Font.font("Arial", FontWeight.BOLD, 40));
        text2.setEffect(blur2);

        Scene scene = new Scene(new Pane(text1, text2), 425, 175);
        primaryStage.setScene(scene);
        primaryStage.show();

    }
}