How to Create Lines and Shapes in JavaFX - dummies

How to Create Lines and Shapes in JavaFX

By Doug Lowe

You can create lines, rectangles, circles, and arcs in JavaFX. You can easily modify the sizes, corners, and other attributes of shapes. Here are code listings and examples for each.

Create lines in JavaFX

The most basic type of shape is a line, created with the Line class. To create a line, you specify the x and y coordinates of the start and end of the line, as in this example:

Line line1 = new Line(0, 0, 100, 200);

This code creates a line that goes from (0,0) to (100, 200).

The grid lines in this figure were drawn by line shapes inside a for loop, like this:

for (int i = 0; i <600; i+=10)
{
    Line line1 = new Line(i, 0, i, 600);
    line1.setStroke(Color.LIGHTGRAY);
    Line line2 = new Line(0, i, 600, i);
    line2.setStroke(Color.LIGHTGRAY);
    group1.getChildren().addAll(line1, line2);
}

The for loop iterates a variable i from 0 to 600 in increments of 10. On each iteration of the loop, two lines are created: a vertical line that uses the variable i as its x-axis and a horizontal line that uses the variable i as its y-axis. The stroke color for each line is set to light gray, and the lines are then added to a Group object named group1.

Create rectangles in JavaFX

A rectangle requires an (x, y) starting point, a width, and a height. Here’s the code that creates a rectangle:

Rectangle r1 = new Rectangle(50,25,100,140);
r1.setStroke(Color.BLACK);
r1.setFill(null);
r1.setStrokeWidth(3);

Here the rectangle starts at (50, 25). Its width is 100, and its height is 140. Notice that the fill color is set to null so that the rectangle will be transparent.

You can create a rectangle with rounded corners by calling the setArcWidth and setArcheight methods. Here’s the rounded rectangle in the middle of the first row of shapes shown in the figure:

Rectangle r2 = new Rectangle(250,25,100,140);
r2.setStroke(Color.BLACK);
r2.setFill(null);
r2.setStrokeWidth(3);
r2.setArcWidth(25);
r2.setArcHeight(25);

Here, the corners are rounded with an arc whose height and width are both 25.

You can create some interesting shapes by using unequal values for the arc’s width and height. For the third shape in the first row of the figure, arc width is set to 75 and the height to 125:

Creating shapes in JavaFX.

Rectangle r3 = new Rectangle(450,25,100,140);
r3.setStroke(Color.BLACK);
r3.setFill(null);
r3.setStrokeWidth(3);
r3.setArcWidth(75);
r3.setArcHeight(125);

Create circles in JavaFX

To create a circle, you use the Circle class, specifying the x- and y-coordinates of the center of the circle and the radius. Here’s the code that creates the circle in the figure:

Circle c1 = new Circle(100, 300, 75);
c1.setStroke(Color.BLACK);
c1.setFill(null);
c1.setStrokeWidth(3);

An ellipse is similar to a circle, but has two radii: one in the x-axis, the other in the y-axis. You specify both radii in the constructor. Here’s the code that creates the first ellipse in the figure:

Ellipse e1 = new Ellipse(300, 300, 75, 40);
e1.setStroke(Color.BLACK);
e1.setFill(null);
e1.setStrokeWidth(3);

The second ellipse is similar, but the x- and y-radii are reversed:

Ellipse e2 = new Ellipse(300, 300, 40, 75);

Create arcs in JavaFX

Another useful type of shape is an arc, which is a segment of an ellipse. To create an arc, you supply the parameters for the ellipse and then you supply the angle at which the arc begins: 0 is due east (3:00 on a clock face). Finally, you supply the length, which represents how much of the ellipse the arc spans and is also expressed in degrees.

The important thing to know is that the arc travels counterclockwise from the starting point. If you specify /90 as the starting point and 90 as the extent, the arc travels from 12:00 high to 9:00, as shown in the first shape in the third row in the figure.

JavaFX can create three types of arcs, which you can specify via the setType method:

  • ArcType.OPEN: Indicates that you want to draw just the arc itself

  • ArcType.CHORD: Means that you want to draw the arc and then connect the ends with a straight line to create a closed shape

  • ArcType.ROUND: Means that you want to use straight lines to connect the ends to the center of the ellipse, thereby creating a shape that looks like a piece of pie

Here’s an example that creates the first arc shown in the figure:

Arc a1 = new Arc(150, 550, 100, 100, 90, 90);
a1.setType(ArcType.OPEN);
a1.setStroke(Color.BLACK);
a1.setFill(null);
a1.setStrokeWidth(3);

The second arc is created with these statements:

Arc a2 = new Arc(300, 550, 100, 100, 45, 90);
a2.setType(ArcType.CHORD);
a2.setStroke(Color.BLACK);
a2.setFill(null);
a2.setStrokeWidth(3);

Finally, the third arc (the pie slice) is created by these statements:

Arc a3 = new Arc(500, 550, 100, 100, 45, 90);
a3.setType(ArcType.ROUND);
a3.setStroke(Color.BLACK);
a3.setFill(null);
a3.setStrokeWidth(3);