Javafx 简明教程

JavaFX - Blend Effect

通常情况下，混合是指两种或多种不同事物或物质的混合。如果我们应用混合效果，它将采用两个不同输入的像素。这将在相同位置执行，并且它基于 blend mode 生成一个组合输出。

In general, blend means mixture of two or more different things or substances. If we apply the blend effect, it will take the pixels of two different inputs. This will be done at the same location and it produces a combined output based on the blend mode.

例如，如果我们绘制两个对象，则顶部对象覆盖底部对象。在应用混合效果时，重叠区域中两个对象的像素基于输入模式组合并显示。

For example, if we draw two objects the top object covers the bottom one. On applying the blend effect, the pixels of the two objects in the overlap area are combined and displayed based on the input mode.

包 javafx.scene.effect 中名为 Blend 的类表示混合效果，此类包含四个属性，它们分别是 -

The class named Blend of the package javafx.scene.effect represents the blend effect, this class contains four properties, which are −

bottomInput − This property is of the type Effect and it represents the bottom input to the blend effect.
topInput − This property is of the type Effect and it represents the top input to the blend effect.
opacity − This property is of double type and it represents the opacity value modulated with the top input.
mode − This property is of the type BlendMode and it represents the mode used to blend the two inputs together.

Example

下面是一个演示混合效果的示例。在这里，我们绘制一个用 BROWN 颜色填充的圆圈，其上面是一个 BLUEVIOLET ColorInput。

Following is an example demonstrating the blend effect. In here, we are drawing a circle filled with BROWN color, on top of it lies a BLUEVIOLET ColorInput.

我们应用了混合效果，在重叠区域中选择一种混合模式，两个对象的色彩以乘数形式相乘后显示。

We have applied the blend effect choosing a multiply mode In the overlap area, the colors of the two objects were multiplied and displayed.

将此代码保存在名为 BlendEffectExample.java 的文件中。

Save this code in a file with the name BlendEffectExample.java.

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.scene.effect.Blend;
import javafx.scene.effect.BlendMode;
import javafx.scene.effect.ColorInput;
import javafx.scene.paint.Color;

public class BlendEffectExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();

      //Setting the center of the Circle
      circle.setCenterX(75.0f);
      circle.setCenterY(75.0f);

      //Setting radius of the circle
      circle.setRadius(30.0f);

      //Setting the fill color of the circle
      circle.setFill(Color.BROWN);

      //Instantiating the blend class
      Blend blend = new Blend();

      //Preparing the to input object
      ColorInput topInput = new ColorInput(35, 30, 75, 40, Color.BLUEVIOLET);

      //setting the top input to the blend object
      blend.setTopInput(topInput);

      //setting the blend mode
      blend.setMode(BlendMode.SRC_OVER);

      //Applying the blend effect to circle
      circle.setEffect(blend);

      //Creating a Group object
      Group root = new Group(circle);

      //Creating a scene object
      Scene scene = new Scene(root, 150, 150);

      //Setting title to the Stage
      stage.setTitle("Blend Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令，从命令提示符编译并执行已保存的 java 文件。

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls BlendEffectExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls BlendEffectExample

Output

执行后，上述程序会生成如下所示的 JavaFX 窗口。

On executing, the above program generates a JavaFX window as shown below.

Blend Modes

S.NO	Mode & Description	Output
1	ADD In this mode, the color values of the top and bottom inputs are added and displayed.
2	MULTIPLY In this mode, the color values of the top and bottom inputs are multiplied and displayed.
3	DIFFERENCE In this mode, among the color values of the top and bottom inputs, the darker one is subtracted from the lighter one and displayed.
4	RED In this mode, the red components of the bottom input were replaced by the red components of the top input.
5	BLUE In this mode, the blue components of the bottom input were replaced by the blue components of the top input.
6	GREEN In this mode, the green components of the bottom input were replaced by the green components of the top input.
7	EXCLUSION In this mode, the color components of the two inputs were multiplied and doubled. Then they are subtracted from the sum of the color components of the bottom input. The resultant is then displayed.
8	COLOR_BURN In this mode, the inverse of the bottom input color component was divided by the top input color component. Thus, the obtained value is inverted and displayed.
9	COLOR_DODGE In this mode, the bottom input color components were divided by the inverse of the top input color components and thus obtained value is inverted and displayed.
10	LIGHTEN In this mode, the lighter color component, among the both inputs are displayed.
11	DARKEN In this mode, the darker color component, among the top and bottom inputs is displayed.
12	SCREEN In this mode, the color components of the top and bottom inputs were inverted, multiplied and thus obtained value is inverted and displayed.
13	OVERLAY In this mode, based on the bottom input color, the color components of the two input values were multiplied or screened and the resultant is displayed.
14	HARD_LIGHT In this mode, based on the top input color, the color components of the two input values were multiplied or screened and the resultant is displayed.
15	SOFT_LIGH In this mode, based on the top input color, the color components of the two input values were softened or lightened and the resultant is displayed.
16	SRC_ATOP In this mode, the over lapping area is filled with the color component of the bottom input. While the nonoverlapping area is filled with the color component of the top input.
17	SRC_OVER In this mode, the top input is drawn over the bottom input.