JavaFX: Working with Rectangle shape

 

Rectangle class defines a rectangle with the specified size and location.

 

Rectangle class provides following constructors to define Rectangles.

 

public Rectangle()

public Rectangle(double width, double height)

public Rectangle(double width, double height, Paint fill)

public Rectangle(double x, double y, double width, double height)

width: width of the rectangle

height: height of the rectangle

x: horizontal position of the rectangle

y: vertical position of the rectangle

fill: Color to be fill the rectangle.

 

Example

Rectangle r1 = new Rectangle();

Rectangle r2 = new Rectangle(300, 100);

Rectangle r3 = new Rectangle(300, 100, Color.GREEN);

Rectangle r4 = new Rectangle(10, 20, 200, 100);

 

By default the rectangle has sharp corners. Rounded corners can be specified by setting both of the arcWidth and arcHeight properties to positive values.

 

r4.setArcHeight(30);

r4.setArcWidth(30);

 

FXML to create rectangle shape.

 

Example 1: Simple Rectangle             

<Rectangle fx:id="rectangle2" fill="lightgreen"

                  width="100" height="50" smooth="true" stroke="black" strokeWidth="5"

                  x= "170" y = "50"/>

 

Example 2: Rounded Rectangle

<Rectangle fx:id="rectangle1" arcHeight="30" arcWidth="30" fill="lightblue"

                  width="100" height="50" smooth="true" stroke="black" strokeWidth="5"

                  x="50" y = "50"/>

 

rectangleDemo.fxml

<?import javafx.scene.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<Group xmlns:fx="http://javafx.com/fxml" fx:controller="com.sample.app.controller.RectangleController">


	<Rectangle fx:id="rectangle1" arcHeight="30" arcWidth="30" fill="lightblue"
		width="100" height="50" smooth="true" stroke="black" strokeWidth="5" 
		x="50" y = "50"/>
		
	<Rectangle fx:id="rectangle2" fill="lightgreen"
		width="100" height="50" smooth="true" stroke="black" strokeWidth="5"
		x= "170" y = "50"/>
		
	<Rectangle fx:id="rectangle2" arcHeight="30" arcWidth="30" fill="lightgray"
		width="100" height="50" smooth="true" stroke="black" strokeWidth="5"
		x= "290" y = "50"/>
		
	<Rectangle fx:id="rectangle2" fill="lightpink"
		width="100" height="50" smooth="true" stroke="black" strokeWidth="5"
		x= "410" y = "50"/>
	
</Group>

 

RectangleController.java

package com.sample.app.controller;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.shape.Rectangle;

public class RectangleController implements Initializable {

	@FXML
	private Rectangle rectangle1;

	@FXML
	private Rectangle rectangle2;

	@Override
	public void initialize(URL location, ResourceBundle resources) {

	}

}

 

RectangleDemo.java

package com.sample.app;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class RectangleDemo extends Application {

	public static void main(String args[]) {
		launch(args);

	}

	@Override
	public void start(Stage primaryStage) throws Exception {

		Parent root = (Parent) FXMLLoader.load(RectangleDemo.class.getResource("/rectangleDemo.fxml"));

		Scene scene = new Scene(root, 600, 300, Color.WHITE);

		primaryStage.setTitle("Rectangle Demo");
		primaryStage.setScene(scene);
		primaryStage.show();
	}

}

 

Output

 

 

 

How to draw rectangle with dashed lines?

Using strokeDashArray property, we can draw rectangle with dashed lines.

 

<Rectangle fx:id="rectangle1" arcHeight="30" arcWidth="30" fill="lightblue"

                  width="100" height="50" smooth="true" stroke="black" strokeWidth="5"

                  x="50" y = "50" strokeDashArray="10"/>

 

Update rectangleDemo.fxml file like below and rerun RectangleDemo application.

<?import javafx.scene.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<Group xmlns:fx="http://javafx.com/fxml" fx:controller="com.sample.app.controller.RectangleController">


	<Rectangle fx:id="rectangle1" arcHeight="30" arcWidth="30" fill="lightblue"
		width="100" height="50" smooth="true" stroke="black" strokeWidth="5" 
		x="50" y = "50" strokeDashArray="10"/>
		
	<Rectangle fx:id="rectangle2" fill="lightgreen"
		width="100" height="50" smooth="true" stroke="black" strokeWidth="5"
		x= "170" y = "50"/>
		
	<Rectangle fx:id="rectangle2" arcHeight="30" arcWidth="30" fill="lightgray"
		width="100" height="50" smooth="true" stroke="black" strokeWidth="5"
		x= "290" y = "50" strokeDashArray="10"/>
		
	<Rectangle fx:id="rectangle2" fill="lightpink"
		width="100" height="50" smooth="true" stroke="black" strokeWidth="5"
		x= "410" y = "50"/>
	
</Group>

  You will see that rectangles with strokedDashArray property are painted with dashed lines.

 

 

 

 

Previous                                                    Next                                                    Home