Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

JavaFx Pattern Fill Shapes

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:

  1. ImagePattern(Image image)
  2. 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.

Tile Image
Tile Image

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.

Fig 1. Fill Rectangle With Image Pattern
Fig 1. Fill Rectangle With Image Pattern

Explanation

  1. 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.
  2. Next, we create JavaFx Rectangle shape, and this is the object we will fill with the image.
  3. The second version of the ImagePattern constructor 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.
  4. Using the setFill method 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.

Fig 2. Recntangle Filled with Patterns
Fig 2. Recntangle Filled with Patterns

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:

Fig 3. Fill Rectangle with OneTile
Fig 3. Fill Rectangle with OneTile

Explanation

  1. We create a JavaFx rectangle with width 500 and height 440.
  2. As in our previous example, we will use setFill method to paint the rectangle with image pattern.
  3. 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:

Fig 4. Pattern Fill without Tiling
Fig 4. Pattern Fill without Tiling

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:

Fig 5. JavaFx Image Pattern Fill Circle
Fig 5. JavaFx Image Pattern Fill Circle

Explanation

  1. 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.
  2. The Circle class’s constructor is taking the ImagePattern instance which we created in the previous step.
  3. 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.

Fig 6. Pattern Fill for the Circle
Fig 6. Pattern Fill for the Circle

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.

Fig 7 - Setting the proportional to false
Fig 7 – Setting the proportional to false

8. Code Reference

Example 01: Rectangle Filled with Tiled Image

Example 02: Rectangle Filled with Image

Example 03: Circle Filled with Tiled Image

Categories: JavaFx

Tags: , , , ,

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.