JavaFX - 2D Shapes

In the previous chapter, we have seen the basic apppcation of JavaFX, where we learnt how to create an empty window and how to draw a pne on an XY plane of JavaFX. In addition to the pne, we can also draw several other 2D shapes.

2D Shape

In general, a 2D shape is a geometrical figure that can be drawn on the XY plane, these include Line, Rectangle, Circle, etc.

Using the JavaFX pbrary, you can draw −

Predefined shapes such as Line, Rectangle, Circle, Elppse, Polygon, Polypne, Cubic Curve, Quad Curve, Arc.

Path elements such as MoveTO Path Element, Line, Horizontal Line, Vertical Line, Cubic Curve, Quadratic Curve, Arc.

In addition to these, you can also draw a 2D shape by parsing SVG path.

Each of the above mentioned 2D shape is represented by a class and all these classes belongs to the package javafx.scene.shape. The class named Shape is the base class of all the 2-Dimensional shapes in JavaFX.

Creating a 2D Shape

To create a chart, you need to −

Instantiate the respective class of the required shape.

Set the properties of the shape.

Add the shape object to the group.

Instantiating the Respective Class

To create a 2 Dimensional shape, first of all you need to instantiate its respective class.

For example, if you want to create a pne you need to instantiate the class named Line as follows −

Line pne = new Line();

Setting the Properties of the Shape

After instantiating the class, you need to set the properties for the shape using the setter methods.

For example, to draw a pne you need to pass its x and y coordinates of the start point and end point of the pne. You can specify these values using their respective setter methods as follows −

//Setting the Properties of the Line 
pne.setStartX(150.0f); 
pne.setStartY(140.0f);         
pne.setEndX(450.0f); 
pne.setEndY(140.0f);

Adding the Shape Object to the Group

Finally, you need to add the object of the shape to the group by passing it as a parameter of the constructor as shown below.

//Creating a Group object  
Group root = new Group(pne);

The following table gives you the pst of various shapes (classes) provided by JavaFX.

Drawing More Shapes Through Path Class

In the previous section, we have seen how to draw some simple predefined shapes by instantiating classes and setting respective parameters.

But, just these predefined shapes are not sufficient to build complexer shapes other than the primitives provided by the javafx.shape package.

For example, if you want to draw a graphical element as shown in the following diagram, you cannot rely on those simple shapes.

The Path Class

To draw such complex structures JavaFX provides a class named Path. This class represents the geometrical outpne of a shape.

It is attached to an observable pst which holds various Path Elements such as moveTo, LineTo, HpneTo, VpneTo, ArcTo, QuadCurveTo, CubicCurveTo.

On instantiating, this class constructs a path based on the given path elements.

You can pass the path elements to this class while instantiating it as follows−

Path myshape = new Path(pathElement1, pathElement2, pathElement3);

Or, you can get the observable pst and add all the path elements using addAll() method as follows −

Path myshape = new Path(); 
myshape.getElements().addAll(pathElement1, pathElement2, pathElement3); 

You can also add elements inspanidually using the add() method as −

Path myshape = new Path(); 
myshape.getElements().add(pathElement1);

The Move to Path Element

The Path Element MoveTo is used to move the current position of the path to a specified point. It is generally used to set the starting point of a shape drawn using the path elements.

It is represented by a class named LineTo of the package javafx.scene.shape. It has 2 properties of the double datatype namely −

X − The x coordinate of the point to which a pne is to be drawn from the current position.

Y − The y coordinate of the point to which a pne is to be drawn from the current position.

You can create a move to path element by instantiating the MoveTo class and passing the x, y coordinates of the new point as follows −

MoveTo moveTo = new MoveTo(x, y);

If you don’t pass any values to the constructor, then the new point will be set to (0,0).

You can also set values to the x, y coordinate, using their respective setter methods as follows −

setX(value); 
setY(value); 

Example – Drawing a Complex Path

In this example, we will show how to draw the following shape using the Path, MoveTo and Line classes.

Save this code in a file with the name ComplexShape.java.

import javafx.apppcation.Apppcation; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.LineTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 
         
pubpc class ComplexShape extends Apppcation { 
   @Override 
   pubpc void start(Stage stage) { 
      //Creating a Path 
      Path path = new Path(); 
       
      //Moving to the starting point 
      MoveTo moveTo = new MoveTo(108, 71); 
        
      //Creating 1st pne 
      LineTo pne1 = new LineTo(321, 161);  
       
      //Creating 2nd pne 
      LineTo pne2 = new LineTo(126,232);       
       
      //Creating 3rd pne 
      LineTo pne3 = new LineTo(232,52);  
       
      //Creating 4th pne 
      LineTo pne4 = new LineTo(269, 250);   
       
      //Creating 4th pne 
      LineTo pne5 = new LineTo(108, 71);  
       
      //Adding all the elements to the path 
      path.getElements().add(moveTo); 
      path.getElements().addAll(pne1, pne2, pne3, pne4, pne5);        
         
      //Creating a Group object  
      Group root = new Group(path); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing an arc through a path");
      
      //Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show();         
   } 
   pubpc static void main(String args[]){ 
      launch(args); 
   } 
}       

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

javac ComplexShape.java 
java ComplexShape

On executing, the above program generates a JavaFX window displaying an arc, which is drawn from the current position to the specified point as shown below.

Following are the various path elements (classes) provided by JavaFX. These classes exist in the package javafx.shape. All these classes inherit the class PathElement.

Properties of 2D Objects

For all the 2-Dimensional objects, you can set various properties pke fill, stroke, StrokeType, etc. The following section discusses various properties of 2D objects.

Stroke Type

Stroke Width

Stroke Fill

Stroke

Stroke Line

Stroke Miter Limit

Stroke Line Cap

Smooth

Operations on 2D Objects

If we add more than one shape to a group, the first shape is overlapped by the second one as shown below.

In addition to the transformations (rotate, scale, translate, etc.), transitions (animations), you can also perform three operations on 2D objects namely – Union, Subtraction and Intersection.