JavaFX 2D Shapes - JavaFX

What is JavaFX 2D Shapes?

In the previous chapter, we have seen the simple application of JavaFX, where we learnt a way to create an empty window and the way to draw a line on an XY plane of JavaFX. in addition to the line, we can also draw several different 2d shapes.

2d shape

In preferred, a 2d form is a geometrical figure that may be drawn at the XY plane, those consist of Line, Rectangle, Circle, etc.

Using the JavaFX library, you may draw −

• Predefined shapes including Line, Rectangle, Circle, Ellipse, Polygon, Polyline, Cubic Curve, Quad Curve, Arc.
• Path elements including MoveTO path detail, Line, Horizontal Line, Vertical Line, Cubic Curve, Quadratic Curve, Arc.
• In addition to these, you may also draw a 2d shape through parsing SVG path.

Every of the above stated 2d form is represented by a class and these kinds of lessons 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 specified shape.
• Set the properties of the shape.
• Add the shape item to the group.

Instantiating the Respective class

To create a 2 Dimensional shape, initially you want to instantiate its respective class.

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

Line line = new Line();

Setting the Properties of The Shape

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

For example, to draw a line you want to pass its x and y coordinates of the start point and end point of the line. you may specify these values using their respective setter techniques as follows –

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

Adding the shape object to the Group

Finally, you want to add the item of the shape to the group by using passing it as a parameter of the constructor as proven below.

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

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

Drawing More Shapes Through Path Class

In the previous section, we have seen a way to draw some simple predefined shapes by way of instantiating lessons and setting respective parameters.

But, simply these predefined shapes are not enough to build complexer shapes apart from the primitives furnished through the javafx.shape package.

As an example, in case you need to draw a graphical detail as proven within the following diagram, you cannot rely on those easy shapes.

The path class

To draw such complex systems JavaFX presents a class named path. This class represents the geometrical outline of a shape.

It is connected to an observable list which holds various path elements which includes moveTo, LineTo, HlineTo, VlineTo, ArcTo, QuadCurveTo, CubicCurveTo.

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

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

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

Or, you may get the observable list and upload all the path elements using addAll() method as follows –

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

You can also add elements individually 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 function of the path to a specific point. it is generally used to set the starting point of a shape drawn the usage of the path elements.

It is represented by using 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 line is to be drawn from the modern function.
• Y − The y coordinate of the point to which a line is to be drawn from the modern position.

you may create a pass to path detail 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 can be set to (0,0).

You may 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.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) { //Creating a Path Path path = new Path(); //Moving to the starting point MoveTo moveTo = new MoveTo(108, 71); //Creating 1st line LineTo line1 = new LineTo(321, 161); //Creating 2nd line LineTo line2 = new LineTo(126,232); //Creating 3rd line LineTo line3 = new LineTo(232,52); //Creating 4th line LineTo line4 = new LineTo(269, 250); //Creating 4th line LineTo line5 = new LineTo(108, 71); //Adding all the elements to the path path.getElements().add(moveTo); path.getElements().addAll(line1, line2, line3, line4, line5); //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(); } public static void main(String args[]){ launch(args); } }

Collect and execute the saved java file from the command prompt the use of the following instructions.

javac ComplexShape.java java ComplexShape

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

Following are the various path elements (classes) provided through JavaFX. those classes exist inside the package javafx.shape. all these instructions inherit the class PathElement.

Properties of 2D Objects

For all the 2-Dimensional objects, you may set various properties like 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 changes (rotate, scale, translate, etc.), transitions (animations), you may also perform three operations on 2d objects namely – Union, Subtraction and Intersection.