Create Square in JavaFX

Sheeraz Gul Jul 07, 2022
Create Square in JavaFX

A square has all the sides equal to each other; we can use the Rectangle functionality in JavaFX to create a square. This tutorial demonstrates how to create a square in JavaFX.

Create a Square in JavaFX

The Rectangle functionality creates four side shapes in JavaFX. The Rectangle class belongs to JavaFX.scene.shape.

We can instantiate the Rectangle class and create Rectangle Node in JavaFX. The Rectangle class has four basic properties:

  1. x − This is the x coordinate of the start point of the rectangle.
  2. y − This is the y coordinate of the start point of the rectangle.
  3. width − Width of the rectangle.
  4. height − Height of the rectangle.

The syntax for rectangle and its properties:

Rectangle rectangle = new Rectangle(x, y, width, height);

setX(value of x);
setY(value of y);
setWidth(width);
setHeight(height);

To draw a square in JavaFX, do the following steps.

  1. Create a class by extending the Application class.
  2. Start Implementing the start() method.
  3. Create a square by instantiating the class Rectangle.
  4. Set the properties of the rectangle. Make sure the X is equal to Y, and the width is equal to the height of the square.
  5. Create a group object, instantiate the group class and pass the rectangle to it.
  6. Create a scene object, instantiate the scene class, and pass the group object to the scene.
  7. Set the title using the setTitle() method.
  8. Add a scene to the stage using the setScene() method.
  9. Display the stage using the show method and launch the application.

Let’s try to implement an example based on the above steps.

Example Code:

package delftstack;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;

public class JavaFX_Square extends Application {
    @Override
    public void start(Stage Demo_Stage) {
        //Drawing a Square
        Rectangle Square = new Rectangle();

        //Setting the properties of the Square
        Square.setX(150.0f);
        Square.setY(150.0f);
        Square.setWidth(300.0f);
        Square.setHeight(300.0f);

        //Create a Group object
        Group Demo_Root = new Group(Square);

        //Create a scene object
        Scene Demo_Scene = new Scene(Demo_Root, 600, 600);

        //Set title to the Stage
        Demo_Stage.setTitle("Drawing Sqaure");

        //Add scene to the stage
        Demo_Stage.setScene(Demo_Scene);

        //Display the stage
        Demo_Stage.show();
    }
    public static void main(String args[]){
        launch(args);
    }
}

The code above will create a circle with height 300px and width 300px. See output:

JavaFX Square

Let’s try to create a square with round corners. For round corners we use the properties setArcHeight() and setArcWidth(). See example:

package delftstack;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;

public class JavaFX_Square extends Application {
    @Override
    public void start(Stage Demo_Stage) {
        //Drawing a Square
        Rectangle Square = new Rectangle();

        //Setting the properties of the Square
        Square.setX(150.0f);
        Square.setY(150.0f);
        Square.setWidth(300.0f);
        Square.setHeight(300.0f);
        Square.setArcHeight(35);
        Square.setArcWidth(35);
        Square.setFill(Color.LIGHTBLUE);

        //Create a Group object
        Group Demo_Root = new Group(Square);

        //Create a scene object
        Scene Demo_Scene = new Scene(Demo_Root, 600, 600);

        //Set title to the Stage
        Demo_Stage.setTitle("Drawing Sqaure");

        //Add scene to the stage
        Demo_Stage.setScene(Demo_Scene);

        //Display the stage
        Demo_Stage.show();
    }
    public static void main(String args[]){
        launch(args);
    }
}

The code above will create a round corner square with a height and width of 300px. See output:

JavaFX Round Square

Author: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Related Article - Java JavaFX