We can use radial gradient to make shapes appear three-dimensional.
Gradient paint can interpolate between two or more colors, which gives depth to the shape.
JavaFX provides two types of gradients: a radial (RadialGradient
) and a linear
(LinearGradient
) gradient.
To create a gradient color in JavaFX we need to set five properties.
Stop
colors. By setting proportional attribute to false, we can set the gradient axis to have a beginning point and an end point based on standard screen (x, y) coordinates.
By setting the proportional attribute to true, the gradient axis line beginning and ending points will be represented as unit square coordinates. The x, y coordinates for begin and end points must be between 0.0 and 1.0 (double).
To create a linear gradient paint, we specify startX, startY, endX, and endY for the start and end points. The start and end point coordinates specify where the gradient pattern begins and stops.
The following table lists the LinearGradient Properties
Property | Data Type / Description |
---|---|
startX | Double Set X coordinate of the gradient axis start point. |
startY | Double Set Y coordinate of the gradient axis start point. |
endX | Double Set X coordinate of the gradient axis end point. |
endY | Double Set Y coordinate of the gradient axis end point. |
proportional | Boolean Set whether the coordinates are proportional to the shape. true will use unit square coordinates, otherwise use screen coordinate system. |
cycleMethod | CycleMethod Set cycle method applied to the gradient. |
stops | List<Stop> Set stop list for gradient's color specification. |
The following code shows how to use Linear Gradient to paint a Rectangle.
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.scene.paint.CycleMethod; import javafx.scene.paint.LinearGradient; import javafx.scene.paint.Stop; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; //from w ww. j ava 2 s.co m public class Main extends Application { @Override public void start(Stage stage) { VBox box = new VBox(); final Scene scene = new Scene(box,300, 250); scene.setFill(null); Stop[] stops = new Stop[] { new Stop(0, Color.BLACK), new Stop(1, Color.RED)}; LinearGradient lg1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops); Rectangle r1 = new Rectangle(0, 0, 100, 100); r1.setFill(lg1); box.getChildren().add(r1); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } }
The code above generates the following result.
The following table lists RadialGradient Properties.
Property | Data Type/Description |
---|---|
focusAngle | Double Set the angle in degrees from the center of the gradient to the focus point where the first color is mapped. |
focusDistance | Double Set the distance from the center of the gradient to the focus point where the first color is mapped. |
centerX | Double Set X coordinate of the center point of the gradient's circle. |
centerY | Double Set Y coordinate of the center point of the gradient's circle. |
radius | Double Set the radius of the circle of the color gradient. |
proportional | boolean Set coordinates and sizes are proportional to the shape. |
cycleMethod | CycleMethod Set the Cycle method applied to the gradient. |
Stops | List<Stop> Set stop list for gradient's color |
/* ww w . ja v a 2s .c o m*/ import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.paint.Color; import javafx.scene.paint.CycleMethod; import javafx.scene.paint.RadialGradient; import javafx.scene.paint.Stop; import javafx.scene.shape.Circle; import javafx.stage.Stage; public class Main extends Application { static int dx = 1; static int dy = 1; public static void main(String[] args) { Application.launch(args); } @Override public void start(final Stage primaryStage) { primaryStage.setTitle("Animation"); Group root = new Group(); Scene scene = new Scene(root, 400, 300, Color.WHITE); primaryStage.setScene(scene); addBouncyBall(scene); primaryStage.show(); } private void addBouncyBall(final Scene scene) { final Circle ball = new Circle(100, 100, 20); RadialGradient gradient1 = new RadialGradient(0, .1, 100, 100, 20, false, CycleMethod.NO_CYCLE, new Stop(0, Color.RED), new Stop(1, Color.BLACK)); ball.setFill(gradient1); final Group root = (Group) scene.getRoot(); root.getChildren().add(ball); } }
The code above generates the following result.
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.scene.paint.CycleMethod; import javafx.scene.paint.LinearGradient; import javafx.scene.paint.Stop; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; /*from w w w. jav a2 s.c om*/ public class Main extends Application { @Override public void start(Stage stage) { VBox box = new VBox(); final Scene scene = new Scene(box,300, 250); scene.setFill(null); // A rectangle filled with a linear gradient with a translucent color. Rectangle rectangle = new Rectangle(); rectangle.setX(50); rectangle.setY(50); rectangle.setWidth(100); rectangle.setHeight(70); LinearGradient linearGrad = new LinearGradient( 0, // start X 0, // start Y 0, // end X 1, // end Y true, // proportional CycleMethod.NO_CYCLE, // cycle colors // stops new Stop(0.1f, Color.rgb(25, 200, 0, .4)), new Stop(1.0f, Color.rgb(0, 0, 0, .1))); rectangle.setFill(linearGrad); box.getChildren().add(rectangle); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } }
The code above generates the following result.
The following code create a rectangle with a repeating pattern of a gradient using green and black in a diagonal direction.
The start X, Y and end X, Y values are set in a diagonal position,
and the cycle method is set to reflect CycleMethod.REFLECT
.
CycleMethod.REFLECT makes the gradient pattern repeat or cycle between the stop colors.
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.scene.paint.CycleMethod; import javafx.scene.paint.LinearGradient; import javafx.scene.paint.Stop; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; /*from w w w . ja va 2 s . c o m*/ public class Main extends Application { @Override public void start(Stage stage) { VBox box = new VBox(); final Scene scene = new Scene(box, 300, 250); scene.setFill(null); // A rectangle filled with a linear gradient with a translucent color. Rectangle rectangle = new Rectangle(); rectangle.setX(50); rectangle.setY(50); rectangle.setWidth(100); rectangle.setHeight(70); LinearGradient cycleGrad = new LinearGradient(50, // start X 50, // start Y 70, // end X 70, // end Y false, // proportional CycleMethod.REFLECT, // cycleMethod new Stop(0f, Color.rgb(21, 25, 0, .784)), new Stop(1.0f, Color.rgb(0, 210, 0, .784))); rectangle.setFill(cycleGrad); box.getChildren().add(rectangle); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } }
The code above generates the following result.