我在用JavaFX绘制十字架时遇到问题

时间:2019-04-13 02:02:59

标签: java javafx shapes

我正在尝试编写将在网格上对角绘制3种形状的代码。前两个形状是正方形和圆形,我能够做到。

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

这是我的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);

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

非常感谢您的帮助。

2 个答案:

答案 0 :(得分:3)

看起来几何形状还可以,但是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);

image1

  

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

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

image2

答案 1 :(得分:3)

GridPane在添加它们的单元格中对齐其子级。这导致Line的相对位置发生变化。要解决此问题,我建议将Line包裹在不会重新定位其子级的父级中,例如Group

以下更改将导致类似“基督教十字架”的形状旋转180°。

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