java - 我在使用 JavaFX 画十字时遇到问题

Question

我正在尝试编写代码，在网格中沿对角线绘制 3 个形状。前两个形状是正方形和圆形，我能够做到。

然而，第三种形状让我有些悲伤。我应该画一个十字(T 版本，而不是 X)，每次我写出代码时，它看起来像一个侧面，⊢。我知道我只是遗漏了一些简单的东西，但我非常感谢您的帮助!

这是我的Shapes 程序的完整代码。

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);
    }
}

这是我遇到问题的具体片段。

// 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);

我确实需要水平线在 Pane 上稍微高一点。它应该类似于“基督教十字架”。

非常感谢任何帮助。

Answer 1

看起来几何没问题，但是line2的对齐是错误的。在几种居中方式中，

1. 为相关的 GridPane 显式设置对齐方式子节点:

   pane.setHalignment(line2, HPos.CENTER);
   

2. 将行添加到具有所需布局的Pane； StackPane ，例如，默认为 Pos.CENTER:

   StackPane lines = new StackPane(line1, line2);
   pane.add(lines, 2, 2);
   

顺便说一句，明智地使用常量将使修补更容易一些。例如，使用比例值来保持大小成比例，如图所示 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."

使用 approach @fabian 建议，根据需要调整水平线的端点；请注意拉丁十字的变化，如下图所示:

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);