JavaFX - Drawing a Rounded Rectangle



In geometry, a rounded rectangle is defined as a 2D shape that contains arched edges instead of sharp edges. It is obtained by placing four different circles on a sharp-edged rectangle with its vertices as their centers. The edges of this rounded rectangle are common tangents drawn against these circles as shown in the image below.

Rounded Rectangle

In a rounded rectangle, the length and width are of same measurement as the sharp-edged rectangle that is enclosed within it.

Rounded Rectangle in JavaFX

In JavaFX, you can draw a rectangle either with sharp edges or with arched edges as shown in the following diagram.

Rounded Rectangle

The one with arched edges is known as a rounded rectangle, as it does not contain vertices. This figure is mainly used in various applications of design and optics, and has two additional properties namely −

  • arcHeight − The vertical diameter of the arc, at the corners of a rounded rectangle.

  • arcWidth − The horizontal diameter of the arc at the corners of a rounded rectangle.

Arc Width Height

By default, JavaFX creates a rectangle with sharp edges unless you set the height and width of the arc to +ve values (0<) using their respective setter methods setArcHeight() and setArcWidth().

Drawing Rounded Rectangle

In order to draw a rounded rectangle in JavaFX, you also instantiate the class named Rectangle in the javafx.scene.shape package. In addition to that, you also have to set arc properties of a rounded rectangle as shown below −

rectangle.setX(150.0f); 
rectangle.setY(75.0f); 
rectangle.setWidth(300.0f); 
rectangle.setHeight(150.0f);

rectangle.setArcWidth(30.0); 
rectangle.setArcHeight(20.0); 

Follow all the other steps mentioned in the Drawing a Rectangle chapter of this tutorial, to launch a JavaFX application with a rounded rectangle.

Example

Following is a program which generates a rounded rectangle using JavaFX. Save this code in a file with the name RoundedRectangle.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.Rectangle; 
         
public class RoundedRectangle extends Application { 
   @Override 
   public void start(Stage stage) {         
      //Drawing a Rectangle 
      Rectangle rectangle = new Rectangle();  
      
      //Setting the properties of the rectangle 
      rectangle.setX(150.0f); 
      rectangle.setY(75.0f); 
      rectangle.setWidth(300.0f); 
      rectangle.setHeight(150.0f); 
       
      //Setting the height and width of the arc 
      rectangle.setArcWidth(30.0); 
      rectangle.setArcHeight(20.0);  
         
      //Creating a Group object  
      Group root = new Group(rectangle); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a Rectangle");
      
      //Adding scene to the stage 
      stage.setScene(scene); 
      
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls RoundedRectangle.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls RoundedRectangle

Output

On executing, the above program generates a JavaFX window displaying a rounded rectangle as shown below.

Drawing Rounded Rectangle

Example

Let us see another example drawing a rounded rectangle using JavaFX. In addition, let us apply some CSS like adding a background color in this example. Save this code in a file with the name CSSRoundedRectangle.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle; 
         
public class CSSRoundedRectangle extends Application { 
   @Override 
   public void start(Stage stage) {         
      //Drawing a Rectangle 
      Rectangle rectangle = new Rectangle();  
      
      //Setting the properties of the rectangle 
      rectangle.setX(50.0f); 
      rectangle.setY(75.0f); 
      rectangle.setWidth(200.0f); 
      rectangle.setHeight(150.0f); 
       
      //Setting the height and width of the arc 
      rectangle.setArcWidth(30.0); 
      rectangle.setArcHeight(20.0);

      //Colour the rounded rectangle
      rectangle.setFill(Color.DARKBLUE);	  
         
      //Creating a Group object  
      Group root = new Group(rectangle);
         
      //Creating a scene object 
      Scene scene = new Scene(root, 300, 300);	
      scene.setFill(Color.RED);		  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a Rectangle");
      
      //Adding scene to the stage 
      stage.setScene(scene); 
      
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls CSSRoundedRectangle.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls CSSRoundedRectangle

Output

On executing, the above program generates a JavaFX window displaying a rounded rectangle as shown below.

Drawing Rounded Rectangle
Advertisements