I am having an issue with drawing a cross with JavaFX

Question

I am trying to write code that will draw 3 shapes diagonally across a grid. The first two shapes are a square and a circle, which I was able to do.

The third shape, however, is giving me some grief. I am supposed to draw a cross (T version, not X), and every time I write out the code it comes out looking like a sideways, ⊢. I know I am just missing something simple, but I would really appreciate the help!

Here is the full code for my Shapes program.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.paint.Color;

public class Shapes extends Application {

    public void start(Stage primaryStage) {
        // This will build the shapes which include a Square, Circle, and 2 Lines.
        // All shapes will have a width of 3.

        // This Rectangle will be colored like the Square on a playstation controller
        Rectangle square = new Rectangle(65, 65, 65, 65);
        square.setStroke(Color.rgb(243, 211, 234));
        square.setStrokeWidth(3);
        square.setFill(Color.rgb(243, 211, 234));

        // A circle colored like the Circle on the playstation controller.
        Circle circle = new Circle(40);
        circle.setStroke(Color.rgb(241, 188, 194));
        circle.setStrokeWidth(3);
        circle.setFill(Color.rgb(241, 188, 194));

        // Lines colored like the Cross button on a playstation controller.
        Line line1 = new Line(-50, 75, 50, 75);
        line1.setStroke(Color.rgb(165, 191, 214));
        line1.setStrokeWidth(3);

        Line line2 = new Line(0, 0, 0, 100);
        line2.setStroke(Color.rgb(165, 191, 214));
        line2.setStrokeWidth(3);


        // Setup the GridPane in the center of the stage which will also pad out from the edge of the window.
        GridPane pane = new GridPane();
        pane.setAlignment(Pos.CENTER);
        pane.setPadding(new Insets(11.5, 12.5, 13.5, 14.5));

        // Place each object in it's respective place on the pane.
        // Square top left, Circle, middle, Cross bottom right.
        pane.add(square, 0, 0);
        pane.add(circle, 1, 1);
        pane.add(line1, 2, 2);
        pane.add(line2, 2, 2);

        // Create the scene to display the program.
        Scene scene = new Scene(pane);
        primaryStage.setTitle("Shapes");
        primaryStage.setScene(scene);
        primaryStage.show();
        primaryStage.setResizable(false);
    }

    public static void main(String[] args) {
        launch(args);
    }
}

And here is the specific snippet I am having trouble with.

// Lines colored like the Cross button on a playstation controller.
Line line1 = new Line(-50, 75, 50, 75);
line1.setStroke(Color.rgb(165, 191, 214));
line1.setStrokeWidth(3);

Line line2 = new Line(0, 0, 0, 100);
line2.setStroke(Color.rgb(165, 191, 214));
line2.setStrokeWidth(3);

I do need the horizontal line to be a bit higher up on the pane. It should resemble a "Christian cross."

Any help is much appreciated.

trashgod · Accepted Answer · 2019-04-13T16:45:15.840

It looks like the geometry is OK, but the alignment of line2 is wrong. Among the several ways to center it,

Set the alignment explicitly for the relevant GridPane child node:
```
pane.setHalignment(line2, HPos.CENTER);
```
Add the lines to a Pane having the desired layout; StackPane, for example, defaults to Pos.CENTER:
```
StackPane lines = new StackPane(line1, line2);
pane.add(lines, 2, 2);
```

As an aside, judicious use of constants will make tinkering a little easier. For example, use a scale value to keep sizes proportional, as shown here:

private static final int N = 50;
…
Rectangle square = new Rectangle(2 * N, 2 * N);
Circle circle = new Circle(N);
Line line1 = new Line(-N, 0, N, 0);
Line line2 = new Line(0, -N, 0, N);

I do need the horizontal line to be a bit higher up on the pane. It should resemble a "Christian cross."

Using the approach suggested by @fabian, adjust the horizontal line's endpoints as desired; note the changes for a Latin cross, seen in the image below:

Line line1 = new Line(-N, 0, N, 0); // Greek
Line line1 = new Line(-N, -N/3, N, -N/3); // Latin
…
pane.add(new Group(line1, line2), 2, 2);

Lots of good information here really appreciate it. However, I do need the horizontal line to be a bit higher up on the pane. It should resemble a "Christian cross". — Epiculous, Apr 13 '19 at 12:27
Happy Easter! I've added more above. Don't forget to update your question with the new requirement. — trashgod, Apr 13 '19 at 16:48

score 3 · Answer 2 · answered Apr 13 '19 at 09:48

3

GridPane aligns it's children inside the cells you add them to. This results in the relative position of the Lines changing. To fix this I recommend wrapping the Lines in a parent that does not reposition it's children, e.g. Group.

The following change will result in a "christian cross"-like shape rotated by 180°.

// pane.add(line1, 2, 2);
// pane.add(line2, 2, 2);
pane.add(new Group(line1, line2), 2, 2);

answered Apr 13 '19 at 09:48

fabian

80,457
12
86
114

Awesome it's almost the way I want it. However I do need to have it the standard way and not upside down. Would I do that by changing my values or will it always come out as an inverted cross? – Epiculous Apr 13 '19 at 12:28
I went ahead and changed the Y values and they do indeed produce the required result! Thank you so much! – Epiculous Apr 13 '19 at 12:51

I am having an issue with drawing a cross with JavaFX

2 Answers2

Linked