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 –

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 –

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.

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. TheLineclass of the packagejavafx.scene.shaperepresents 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 namedRectangle. This class belongs to the packagejavafx.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 namedCircle. This class belongs to the packagejavafx.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 namedEllipse. This class belongs to the packagejavafx.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 namedPolygon. This class belongs to the packagejavafx.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 namedPolygon. This class belongs to the packagejavafx.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 namedCubicCurve. This class belongs to the packagejavafx.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 packagejavafx.scene.shape.

10

Arc

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

Types Of Arc

In addition to this we can draw three types of arc'sOpen, Chord, Round.

11

SVGPath

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

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.

JavaFX - 2D 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−

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

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

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 –

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 –

Example – Drawing a Complex Path

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

JavaFX - 2D Shapes

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

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

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.

JavaFX - 2D Shapes

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.

S.No

Shape & Description

1

LineTo

The path elementlineis used to draw a straight line to a point in the specified coordinates from the current position. It is represented by a class namedLineTo. This class belongs to the packagejavafx.scene.shape.

2

HlineTo

The path elementHLineTois used to draw a horizontal line to a point in the specified coordinates from the current position. It is represented by a class namedHLineTo. This class belongs to the packagejavafx.scene.shape.

3

VLineTo

The path elementvertical lineis used to draw a vertical line to a point in the specified coordinates from the current position. It is represented by a class namedVLineTo. This class belongs to the packagejavafx.scene.shape.

4

QuadCurveTo

The path element quadratic curve is used to draw aquadratic curveto a point in the specified coordinates from the current position. It is represented by a class namedQuadraticCurveTo. This class belongs to the packagejavafx.scene.shape.

5

CubicCurveTo

The path elementcubic curveis used to draw a cubic curve to a point in the specified coordinates from the current position. It is represented by a class namedCubicCurveTo. This class belongs to the packagejavafx.scene.shape.

6

ArcTo

The path elementArcis used to draw an arc to a point in the specified coordinates from the current position. It is represented by a class namedArcTo. This class belongs to the packagejavafx.scene.shape.

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.

JavaFX - 2D Shapes


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.

S.No

Operation & Description

1

Union Operation

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

2

Intersection Operation

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

3

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.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

JavaFX Topics