JavaFX - 2D Shapes

In the previous chapter, we have seen the basic application of JavaFX, where we learnt how to create an empty window and how to draw a line on an XY plane of JavaFX. In addition to the line, 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 library, you can draw −

  • Predefined shapes such as Line, Rectangle, Circle, Ellipse, Polygon, Polyline, 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 in JavaFX

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 circle you need to instantiate the class named Circle as follows −

Circle circle = new Circle();

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, you can set the X, Y coordinates of the center of the Circle class and its radius, using the following setter methods −

// Setting the Properties of a circle
circle.setCenterX(300.0f); 
circle.setCenterY(135.0f); 
circle.setRadius(100.0f);

Adding the Shape Object to the Group

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

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

Various 2D Shapes available in JavaFX

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

S.No Shape & Description
1 Line

A line is a geometrical structure joining two point. The Line class of the package javafx.scene.shape represents a line in the XY plane.
2 Rectangle

In general, a rectangle is a four-sided polygon that has two pairs of parallel and concurrent sides with all interior angles as right angles. In JavaFX, a Rectangle is represented by a class named Rectangle. This class belongs to the package javafx.scene.shape.
3 Rounded Rectangle

In JavaFX, you can draw a rectangle either with sharp edges or with arched edges and The one with arched edges is known as a rounded rectangle.
4 Circle

A circle is a line forming a closed loop, every point on which is a fixed distance from a centre point. In JavaFX, a circle is represented by a class named Circle. This class belongs to the package javafx.scene.shape.
5 Ellipse

An ellipse is defined by two points, each called a focus. If any point on the ellipse is taken, the sum of the distances to the focus points is constant. The size of the ellipse is determined by the sum of these two distances.

In JavaFX, an ellipse is represented by a class named Ellipse. This class belongs to the package javafx.scene.shape.
6 Polygon

A closed shape formed by a number of coplanar line segments connected end to end. In JavaFX, a polygon is represented by a class named Polygon. This class belongs to the package javafx.scene.shape.
7 Polyline

A polyline is same a polygon except that a polyline is not closed in the end. Or, continuous line composed of one or more line segments. In JavaFX, a Polyline is represented by a class named Polygon. This class belongs to the package javafx.scene.shape.
8 Cubic Curve

A cubic curve is a Bezier parametric curve in the XY plane is a curve of degree 3. In JavaFX, a Cubic Curve is represented by a class named CubicCurve. This class belongs to the package javafx.scene.shape.
9 QuadCurve

A quadratic curve is a Bezier parametric curve in the XY plane is a curve of degree 2. In JavaFX, a QuadCurve is represented by a class named QuadCurve. This class belongs to the package javafx.scene.shape.
10 Arc

An arc is part of a curve. In JavaFX, an arc is represented by a class named Arc. This class belongs to the package − javafx.scene.shape.

Types Of Arc

In addition to this we can draw three types of arc's Open, Chord, Round.
11 SVGPath

In JavaFX, we can construct images by parsing SVG paths. Such shapes are represented by the class named SVGPath. This class belongs to the package javafx.scene.shape. This class has a property named content of String datatype. This represents the SVG Path encoded string, from which the image should be drawn..

Properties of 2D Objects

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

We will learn about these properties in detail, in further sections of this tutorial.

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.

Operations On 2D Objects

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.

  • Union Operation: This operation takes two or more shapes as inputs and returns the area occupied by them.

  • Intersection Operation: This operation takes two or more shapes as inputs and returns the intersection area between them.

  • Subtraction Operation: This operation takes two or more shapes as an input. Then, it returns the area of the first shape excluding the area overlapped by the second one.

Advertisements