2D Shapes in JavaFX

Creating 2D Shapes

To be able to create a chart, the following steps should be followed:

• Instantiate the class of the required shape.
• Set the various properties of the shape as per need.
• Finally, add the shape object to the group.

Instantiating the Class of the required Shape

If you wish to create a line, then you first must instantiate the class named as a line:

Line line= new Line();

Setting the Properties

Once the class of the required shape has been instantiated, we also need to set the properties for that shape which is done using the setter method.

If we wish to draw a line, then we must pass x and y coordinates which would act as the starting and ending points for the line. These values can be specified in the following way:

/* Setting the properties */
line.setStartX(120.0f);
line.setStartY(110.0f);
line.setEndX(430.0f);
line.setEndY(120.0f);

Adding the Shape object to Group

After setting the properties, we need to add the object of the shape to the group, which is done by passing it as a parameter to the constructor. An example of the same is shown below:

/* Creating a group object */
Group root = new Group(line);

There are various shapes that can be drawn using JavaFX, the table below lists those shapes with a description of each.
 

Drawing More Shapes

The Path class

JavaFX allows us to draw complex structures by using a class named Path. This class represents the geometrical outline of a shape and is attached to an observable list that holds various path elements like moveTo, LineTo, etc. The path class constructs a path based upon the given path elements when it is instantiated. Multiple path elements can be passed to the class separately by commas, as shown below:

Path MyShape = new Path(path_element_1, path_element_2);

Another way is to first the entire observable list and then add all the path elements using the addAll() method as shown:

Path MyShape = new Path();
MyShape.getElements().addALL(path_element_1, path_element_2);

The Move to Path element

MoveTo is a class which is used to move the current position of the Path to a specified point. Usually, it is used to set the starting point of a shape that is drawn using the path elements. It is present in the javafx.scene.shape package under the class named as LineTo. The class accepts two parameters of a double data type, which are :

• X - This specifies the x-coordinate of the point to which a line is to be drawn from the current position.
• Y - This specifies the y-coordinate of the point to which a line is to be drawn from the current position.

Following is an example of how you can create a move to path element by instantiating the MoveTo class and by passing the x and y coordinates of the new point.

MoveTo moveTo = new MoveTo(x, y);

Example of drawing a complex path

import javafx.application.Application; 
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; 
public class ComplexShape extends Application { 
  @Override 
  public void start(Stage stage) { 
      // create a Path 
      Path path = new Path(); 
      // move to the starting point 
      MoveTo moveTo = new MoveTo(108, 71); 
      // create the 1st line 
      LineTo l1 = new LineTo(321, 161);  
      // create the 2nd line 
      LineTo l2 = new LineTo(126,232);       
      // create the 3rd line 
      LineTo l3 = new LineTo(232,52);  
      // create the 4th line 
      LineTo l4 = new LineTo(269, 250);   
      // create the 5th line 
      LineTo l5 = new LineTo(108, 71);  
      // add all the elements to the path by using the getElements() method
      path.getElements().add(moveTo); 
      path.getElements().addAll(l1, l2, l3, l4, l5);        
      // create a group object  
      Group root = new Group(path); 
      // create a scene object 
      Scene scene = new Scene(root, 600, 300);  
      // set the title to the Stage 
      stage.setTitle("Drawing an arc through a path");
      // add scene to the stage 
      stage.setScene(scene);
      // display the contents of the stage 
      stage.show();         
  } 
  public static void main(String args[]){ 
      launch(args); 
  } 
}     

In order to run the above code, first, save the code in a file named exampleComplexShape.java and to compile & execute, run the following commands from the command prompt

javac exampleComplexShape.java
java exampleComplexShape

Output

Properties of 2D objects

There are various properties that you can set for each 2D object. Some of those properties are:

• Stroke type
• Stroke width
• Stroke fill
• Stroke
• Stroke line
• Stroke miter limit
• Stroker line cap
• Smooth

Operations on 2D objects

If we add multiple shapes to a group, then the first shape is overlapped by the second shape, as shown.

There are various transformations (such as rotate, scale, etc.), transitions, and operations which can be performed on 2D objects. Such operations are defined in the below table.

Frequently Asked Questions

What is the difference between 2D and 3D shapes?

2D shapes differ from 3D shapes as each point of the 2D figure has two coordinates (X, Y), whereas each point of the 3D figure has three coordinates (X, Y, Z).

Which method is used to get the observable list of a path?

The getElements() method is used to get the observable list of a path.

What if we don't pass any values to the constructor of MoveTo class.

If no values are passed to the constructor of the MoveTo class, then the new point is set as (0, 0).

Conclusion

In this article, we have extensively discussed the 2D shapes in JavaFX.

After reading about the 2D shapes in JavaFX, are you not feeling excited to read/explore more articles on Java libraries? Don't worry; Coding Ninjas has you covered. To learn about the top 10 Java libraries, the top open-source libraries, and how to make UI that stands out using java libraries.  

If you wish to enhance your skills in Data Structures and Algorithms, Competitive Programming, JavaScript, etc., you should check out our Guided path column at Coding Ninjas Studio. We at Coding Ninjas Studio organize many contests in which you can participate. You can also prepare for the contests and test your coding skills by giving the mock test series available. In case you have just started the learning process, and your dream is to crack major tech giants like Amazon, Microsoft, etc., then you should check out the most frequently asked problems and the interview experiences of your seniors that will surely help you in landing a job in your dream company. 

Do upvote if you find the blogs helpful.

Happy Learning!