1.JavaFx Pattern Fill
JavaFx allows filling the closed shapes with a color. It is also possible to create an image and use it to fill the closed shapes. JavaFx provides the ImagePattern class which defines how the image pattern paints the target 2d shape. The ImagePattern class needs an Image object and fill rectangle (also called as Anchor Rectangle) definition. In this example, we will explore the ImagePattern class and fill the shapes rectangle and circle.
2. ImagePattern Class
The JavaFx ImagePattern class two versions of constructor. The constructor versions are below:
- ImagePattern(Image image)
- ImagePattern(Image image, double x, double y, double width, double height, boolean proportional)
The first constructor creates a pattern fill object with a single image. When it is applied to a shape, the image is painted to entire shape. Second version of the constructor creates an Anchor rectangle, which can be used to create tiles. We will explore this second version of constructor with multiple examples.
3. Create Tile Image of Pattern Fill
This example requires creating a simple icon sized image. The below image is 32 x 24 pixels in size which you can copy or create your own image. Since, we want to create tiles, we created an image with a icon size. We named this image as Pattern.png and saved along with the java file so that it is available in the class path for easy loading.
4. Pattern Fill Rectangle with Tiles
The code below shows, generating tiles of the above bull’s eye and filling that in the rectangle shape.
Explanation
- First, we create an Image object for our image and store the reference in pattern. At this moment, the Image object holds pixel information of the image 32×24 icon sized image.
- Next, we create JavaFx Rectangle shape, and this is the object we will fill with the image.
- The second version of the
ImagePatternconstructor is used in our example. We pass the image object as first parameter. Second and third param defines top-left corner of the anchor rectangle. In our case, we specified 0,0 and hence, the anchor’s top left pinned to the top-left of the target shape’s bounding rectangles. Fourth and fifth params defines the width and height. In our case, we specified proportional (final param) as true and hence these width and height will be specified in proportions. Width of 0.20 means entire width of the target is covered by 5 tiles. - Using the
setFillmethod of the Rectangle, we are asking the JavaFx to paint the rectangle with the image pattern.
Running the above code (Refer Example 1 in Code Reference) will produce the below result. We can notice, how the image pattern is formed in the target rectangle with 5 tiles on the width and 5 tiles on the height.
5. Fill Rectangle with Stretched Image
It is also possible to fill entire rectangle with one single image by having only one tile. Below is the example:
Explanation
- We create a JavaFx rectangle with width 500 and height 440.
- As in our previous example, we will use
setFillmethod to paint the rectangle with image pattern. - In the image pattern constructor, we specify width & height as 1. Since proportion is set as true, one single tile fills the entire region.
When we run the above code, it will produce the below result:
6. Pattern Fill on Circle
So far in our examples, we used Rectangle shape to explore the pattern fill. Now, we will use the circle shape to perform pattern filling. Below is the code example:
Explanation
- Here, we give proportional ratio of 0.05 for both width and height. This means, we will see 20 tiles in the width and 20 tiles in the height.
- The Circle class’s constructor is taking the ImagePattern instance which we created in the previous step.
- We modify our previous example, to show the circle instance in the scene by adding it to the scene graph.
Below screenshot shows the pattern filled in a circle. Note, the 20 tiles are stacked in the bounding box and for this reason, we can see 20 tiles in the center. You can refer this example at the bottom section as Example 03.
7. Non-Proportional Tile Size
It is also possible to specify the tile width in absolute units in terms of pixels. In the below example, we draw a circle with 200-unit radius. This means, the diameter of the circle is 400 unit. When creating the ImagePattern, the proportional parameter is set to false. Then, tile width and height is specified as 100 units. When JavaFx fills the image pattern in the target shape, it fills 4 tiles in the width of the circle and 4 tiles in height of the circles.
8. Code Reference
Example 01: Rectangle Filled with Tiled Image
|
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 |
package javafx.examples; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.image.Image; import javafx.scene.layout.HBox; import javafx.scene.paint.ImagePattern; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; public class PatternFill extends Application { @Override public void start(Stage primaryStage) { //Sample 01: Load Image Image pattern = new Image(getClass().getResourceAsStream("Pattern.png")); //Sample 02: Create First Rectanle & with pattern Fill Rectangle rc1 = new Rectangle(500, 440); ImagePattern pat1 = new ImagePattern(pattern, 0, 0, 0.20, 0.20, true); rc1.setFill(pat1); //Sample 05: Add Rectangle to Scene HBox root = new HBox(); root.getChildren().add(rc1); Scene scene = new Scene(root, 600, 450); //Sample 06: Show the Stage primaryStage.setTitle("Pattern Fill Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } |
Example 02: Rectangle Filled with Image
|
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 |
package javafx.examples; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.image.Image; import javafx.scene.layout.HBox; import javafx.scene.paint.ImagePattern; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; public class PatternFill extends Application { @Override public void start(Stage primaryStage) { //Sample 01: Load Image Image pattern = new Image(getClass().getResourceAsStream("Pattern.png")); //Sample 02: Create First Rectanle & with pattern Fill Rectangle rc1 = new Rectangle(500, 440); ImagePattern pat1 = new ImagePattern(pattern, 0, 0, 1, 1, true); rc1.setFill(pat1); //Sample 05: Add Rectangle to Scene HBox root = new HBox(); root.getChildren().add(rc1); Scene scene = new Scene(root, 600, 450); //Sample 06: Show the Stage primaryStage.setTitle("Pattern Fill Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } |
Example 03: Circle Filled with Tiled Image
|
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 |
package javafx.examples; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.image.Image; import javafx.scene.layout.HBox; import javafx.scene.paint.ImagePattern; import javafx.scene.shape.Circle; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; public class PatternFill extends Application { @Override public void start(Stage primaryStage) { //Sample 01: Load Image Image pattern = new Image(getClass().getResourceAsStream("Pattern.png")); //Sample 02: Create First Rectanle & with pattern Fill ImagePattern pat1 = new ImagePattern(pattern, 0, 0, 0.05, 0.05, true); Circle c1 = new Circle(200, pat1); //Sample 05: Add Rectangle to Scene HBox root = new HBox(); root.getChildren().add(c1); Scene scene = new Scene(root, 450, 450); //Sample 06: Show the Stage primaryStage.setTitle("Pattern Fill Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } |
Categories: JavaFx
Tags: getResourceAsStream, Image, Image Tile, ImagePattern, setFill
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.