我在使用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);

我确实需要水平线在窗格上稍高一些。它应该像一个“基督教十字架”。

任何帮助深表感谢。

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

我确实需要水平线在窗格上稍高一些。它应该像一个“基督教十字架”。

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

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

Answer 2

GridPane将它们的子项放在您添加它们的单元格中。这导致Lines的相对位置发生变化。为了解决这个问题，我建议将Lines包装在不重新定位其子项的父级中，例如： Group。

以下变化将导致旋转180°的“基督教十字”形状。

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