1. LinearGradient Introduction
The LinearGradient class helps in applying such a gradient to any JavaFx shapes. In JavaFx, Linear Colour Gradient is applied by an axis in which a colour changes gradually from one point to another point. We call this axis as Gradient Axis. If we draw a line perpendicular to a specific point in the linear gradient axis, all the pixels in the perpendicular axis represents same colour.
2. Gradient Axis
Now, let us look at some examples for Gradient Axis. Have a look at the below code:
Explanation
- To experiment the gradient fill, we create a rectangle shape with width 400 and height 300.
- The colour stop defines the offset location and in which a colour change is defined. In our example, we create two
Stopinstances to denote yellow and red colours. In our example, offset 0 and offset 1 defines the start and end point in the gradient axis direction. Note, this is a relative unit. - Next, the
LinearGradientconstructor creates the instance. The first two parameter tells the start of the gradient in terms of x and y coordinate values. Second two parameter denotes the end point of the gradient and by referring the picture we can clearly say the gradient in our example is in horizontal direction. Fifth parameter is a boolean & when it is true, the values (First four params) are specified in relative co-ordinate in proportions. For example, our rectangle width is 400. In proportions – 0 means 0, 1 means 400 and 0.5 means 200. The sixth parameter is to specify the Gradient filling cycles, and, in our example, we specifiedNO_CYCLE. After this, we can pass ‘n’ number of Stop instances. - Once the LinearGradient object is ready, we pass it to the
setFillmethod of the shape.
Running the code will produce the below result. Here, we can see Yellow Stop is at the left as we specified the offset as 0 and Red Stop is towards the right as it has the offset of 1 (Refer Snippet 02).
We can change the Gradient Axis by using the first four parameters. The below picture shows, how we can use first four parameter to change the Gradient Axis and apply the gradient using Yellow, Red Stop objects & their Offset.
3. LinearGradient REPEAT Cycle
We already saw the CycleMethod constant NO_CYCLE in the previous section. We can use REPEAT option to copy the previous gradient along the gradient axis. The code snippet is below:
Explanation
- The first gradient point is in the top left corner of rectangle and second gradient point in the top middle of the rectangle as we specified 0.5 in the parameter. This fills the gradient from left edge to middle of the rectangle.
- Here, we specified the cycle method as
REPEATand hence the un-filled portion on the right side of the rectangle is filled with one more gradient which repeats the previous half.
Now look at the code snippet below:
Now at marker location 1, we changed the value to 0.05. This means, we marked the gradient end at 1:20 th location on the gradient axis and we also asked to perform REPEAT cycle to have multiple gradient which repeats along the gradient axis to fill the rectangle completely.
4. LinearGradient Reflect Cycle
When we set cycle method as reflect, the fill will happen with a mirror image of the previous fill. Let us change our previous example to have REFLECT cycle with same 20 divisions of the gradient area.
Explanation
- We set gradient end point at 1:20th location of the rectangular width as we did in our previous code change.
- This time, we use the
REFLECTcycle method to apply the gradient on the remaining portion of the rectangle. We can compare this result with the previous one to know how the gradient differs when applied as REPEAT & REFLECT.
5. LinearGradient & Multiple Color Stops
In our previous examples, we used only two colours (Red & Yellow) to apply the gradient over the Gradient Axis. It is also possible to use multiple colours stops along the gradient axis. When creating the Stop instances, we can mark the relative location on the axis so that LinearGradient instance will perform colour interpolation between various colours. Now, look at the example below which uses five colours to perform colour gradient on the rectangle.
Explanation
- Here, we create five Stop instances to represent five colours on the gradient axis. First parameter passed to the Stop instance tells the relative location of color stop.
- In the LinearGradient constructor, we decided the Gradient as horizontal and in left->Right direction. Note, we use full rectangle for the gradient and have NO_CYCLE option.
- Finally, we pass all the Gradient Stops to the variable argument constructor which can receive any number of Stop instances. Also, note the order of the Stop instances are not important as the Stop instances already have the relative location of their color stops.
When we use different cycle option, the color stops are still applied relative to the Main Gradient’s relative dimensions. The below example shows that:
Explanation
- We divide the rectangle as 10 parts and apply the gradient to the very first part. This means, we apply the gradient to 1:10th of the rectangle. In that portion, the color stops are applied at five equal intervals (Remember the constructor of Stops – 0, 0.25, 0.5, 0.75 and 1) to make the colour gradient.
- JavaFx fills the remaining portions of the rectangle using the Reflect cycle method. You can also try with the REPEAT method in this same example.
6. Code Reference
Example 1: Linear Gradient Axis
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
package javafxproj; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.StackPane; 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; public class JavaFxProj extends Application { @Override public void start(Stage primaryStage) { //Sample 01: Create a Rectangle Rectangle rct1 = new Rectangle(400, 300); //Sample 02: Create Colour Stop Points Stop YellowStop = new Stop(0, Color.YELLOW); Stop RedStop = new Stop(1, Color.RED); //Sample 03: Create Linear Gradient To Represents the Stops LinearGradient grad = new LinearGradient(1,1,0,0, true,CycleMethod.NO_CYCLE, YellowStop, RedStop ); //Sample 04: Apply the Gradient to Rectangle rct1.setFill(grad); //Sample 05: Add Rectangle to the Scene StackPane root = new StackPane(); root.getChildren().add(rct1); Scene scene = new Scene(root, 600, 400); primaryStage.setTitle("Gradient Fill"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } |
Example 2: Linear Gradient with Multiple Colour Stops
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
package javafxproj; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.StackPane; 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; public class JavaFxProj extends Application { @Override public void start(Stage primaryStage) { //Sample 01: Create a Rectangle Rectangle rct1 = new Rectangle(400, 300); //Sample 02: Create Colour Stop Points Stop YellowStop = new Stop(0, Color.YELLOW); Stop GreenStop = new Stop(0.25, Color.GREEN); Stop BlueStop = new Stop(0.5, Color.BLUE); Stop KhakiStop = new Stop(0.75, Color.DARKKHAKI); Stop RedStop = new Stop(1, Color.RED); //Sample 03: Create Linear Gradient To Represents the Stops LinearGradient grad = new LinearGradient( 0,0, 0.1,0, true, CycleMethod.REFLECT, YellowStop, RedStop, GreenStop, BlueStop, KhakiStop); //Sample 04: Apply the Gradient to Rectangle rct1.setFill(grad); //Sample 05: Add Rectangle to the Scene StackPane root = new StackPane(); root.getChildren().add(rct1); Scene scene = new Scene(root, 600, 400); primaryStage.setTitle("Gradient Fill"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } |
Categories: JavaFx
Tags: JavaFx, LinearGradient, NO_CYCLE, Reflect, Repeat, Stop
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.