JavaFX, 之“立体”球

Author: Silveira

原文

这是一个展示JavaFX 2D图形，特效，渐变的简单教程。

首先我们创建一个Frame，在坐标（120，140）处绘制一个长60像素，宽20像素，黑色填充的椭圆。然后再坐标（100，100）处绘制一个半径为50，红色填充的圆。组合起来以后，圆看起来就像一个立体的球，而椭圆则是他的阴影。

1. import javafx.application.*;
2. import javafx.scene.paint.*;
3. import javafx.scene.geometry.*;
5. Frame {
6. title: "JavaFX Sphere", width: 300, height: 300, visible: true
7. stage: Stage {
8. content: [
9. Ellipse {
10. centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
11. fill: Color.BLACK
12. },
13. Circle { centerX: 100, centerY: 100, radius: 50, fill: Color.RED }
14. ]
15. }
16. }

import javafx.application.*; import javafx.scene.paint.*; import javafx.scene.geometry.*;  Frame {     title: "JavaFX Sphere", width: 300, height: 300, visible: true     stage: Stage {         content: [             Ellipse {                  centerX: 120, centerY: 140, radiusX: 60, radiusY: 20                  fill: Color.BLACK             },             Circle { centerX: 100, centerY: 100, radius: 50, fill: Color.RED }         ]     } } 

现在添加点特效让他更加逼真。

First we’ll just add javafx.scene.effect.* to our import list and just call the gaussian blur effect in our ellipse with

首先我们得把引用加到Import中，import javafx.scene.effect.*，然后调用gaussian blur effect（高斯渐变？）效果到椭圆上，代码如下：

1. effect: GaussianBlur{ radius: 20 }

effect: GaussianBlur{ radius: 20 } 

就这样简单的一句话，特效就出来了，下面是原来的椭圆： 这个是添加了渐变的椭圆：

现在我们给圆添加一个RadialGradient(光线渐变？）让他看起来更像一个球。代码如下：

1. RadialGradient {
2. centerX: 75, centerY: 75, radius: 50, proportional: false
3. stops: [
4. Stop {offset: 0.0 color: Color.WHITE},
5. Stop {offset: 0.3 color: Color.RED},
6. Stop {offset: 1.0 color: Color.DARKRED},
7. ]
8. }

RadialGradient {    centerX: 75, centerY: 75, radius: 50, proportional: false    stops: [       Stop {offset: 0.0 color: Color.WHITE},       Stop {offset: 0.3 color: Color.RED},       Stop {offset: 1.0 color: Color.DARKRED},    ] } 

首先让我们来看颜色是如何变化的，从白色开始，在30%的位置变化为红色，剩下的部分渐变到深红色。这样制造出来的渐变如下： 对应于我们的光线渐变，指定坐标在(75,75)，半径为50.则其效果如下图：

在应用光学渐变之前，我们的圆如下： 应用渐变之后变得立体起来：

完整的代码如下，简单明了

1. import javafx.application.*;
2. import javafx.scene.paint.*;
3. import javafx.scene.effect.*;
4. import javafx.scene.geometry.*;
6. Frame {
7. title: "JavaFX Sphere", width: 300, height: 300, visible: true
8. stage: Stage {
9. content: [
10. Ellipse {
11. centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
12. fill: Color.BLACK
13. effect: GaussianBlur{ radius: 20 }
14. },
15. Circle {
16. centerX: 100, centerY: 100, radius: 50
17. fill: RadialGradient {
18. centerX: 75, centerY: 75, radius: 50, proportional: false
19. stops: [
20. Stop {offset: 0.0 color: Color.WHITE},
21. Stop {offset: 0.3 color: Color.RED},
22. Stop {offset: 1.0 color: Color.DARKRED},
23. ]
24. }
25. }
26. ]
27. }
28. }

import javafx.application.*; import javafx.scene.paint.*; import javafx.scene.effect.*; import javafx.scene.geometry.*;  Frame {     title: "JavaFX Sphere", width: 300, height: 300, visible: true     stage: Stage {         content: [             Ellipse {                 centerX: 120, centerY: 140, radiusX: 60, radiusY: 20                 fill: Color.BLACK                 effect: GaussianBlur{ radius: 20 }             },             Circle {                 centerX: 100, centerY: 100, radius: 50                 fill: RadialGradient {                     centerX: 75, centerY: 75, radius: 50, proportional: false                     stops: [                         Stop {offset: 0.0 color: Color.WHITE},                         Stop {offset: 0.3 color: Color.RED},                         Stop {offset: 1.0 color: Color.DARKRED},                     ]                 }             }         ]     } } 

最终效果截图