Question

你好我想要比数独求解器更好。我已经制作了Java回溯算法，它比不公平的数组输入更好地解决了数独板，现在我想为它制作图形界面，这就是问题。

我想让我的游戏板看起来像这样。我试图在GridPane上的JavaFX中做这个，但我认为我不允许更改网格的板线以将它们更改为不等式（˅＆lt;＆gt;）。然后我试图制作正常的数独方块板，并在网格上显示不等号，但我无法使它们与线条匹配。

这里有什么好方法可以在屏幕截图上制作这样的电路板吗？我想从inequalites输入生成板，然后在单击求解后显示它们填充数字。

我将非常感谢你的每一次帮助。

Answer 1

为每个单元格创建控件的一种可能方法是：由大/小符号指定的定义形状和可编辑文本，如下所示：

对于任何给定的单个单元格，您可以创建一个包含Path，Text和TextField个节点的方形区域。

路径只会被抚摸，而不是填充，并且它不会离开方形区域，这样便于在3x3方框中堆积9个单元格。

如果一个小区侧需要一个更大的符号，那么该小区外的部分将由相邻小区定义，该小区将使用一个较低的符号。

例如，这三个单元格：

可以组合成一个3x1行：

如果还有两行，我们将有一个3x3的盒子：

完全符合要求。现在有8个盒子，我们将拥有完整的数独。

现在让我们创建这个单元格。

<强> GreaterCell

为方便起见，我们定义了三种可能的侧面类型：内侧较大和较低，边界侧相等。

public enum Symbol {
    GREATER, EQUAL, LOWER
}

让我们从Path开始。我们将使用MoveTo和LineTo，具体取决于四边的类型。

private static final double SIDE = 60;
private Path path;

private void createPath() {
    path.getElements().clear();
    path.getElements().add(new MoveTo(0d, 0d));

    // top
    path.getElements().add(new LineTo(SIDE / 3d ,0));
    switch (top) {
        case GREATER: path.getElements().add(new MoveTo(2d * SIDE / 3d, 0d)); break;
        case EQUAL: path.getElements().add(new LineTo(2d * SIDE / 3d, 0d)); break;
        case LOWER: path.getElements().add(new LineTo(SIDE / 2d, SIDE / 5d)); 
                    path.getElements().add(new LineTo(2d * SIDE / 3d, 0d)); 
                    break;
    }
    path.getElements().add(new LineTo(SIDE, 0d));

    // right
    path.getElements().add(new LineTo(SIDE, SIDE / 3d));
    switch (right) {
        case GREATER: path.getElements().add(new MoveTo(SIDE, 2d * SIDE / 3d)); break;
        case EQUAL: path.getElements().add(new LineTo(SIDE, 2d * SIDE / 3d)); break;
        case LOWER: path.getElements().add(new LineTo(SIDE - SIDE / 5d, SIDE / 2d)); 
                    path.getElements().add(new LineTo(SIDE, 2d * SIDE / 3d)); 
                    break;
    }
    path.getElements().add(new LineTo(SIDE, SIDE));

    // bottom
    path.getElements().add(new LineTo(2d * SIDE / 3d, SIDE));
    switch (bottom) {
        case GREATER: path.getElements().add(new MoveTo(SIDE / 3d, SIDE)); break;
        case EQUAL: path.getElements().add(new LineTo(SIDE / 3d, SIDE)); break;
        case LOWER: path.getElements().add(new LineTo(SIDE / 2d, SIDE - SIDE / 5d)); 
                    path.getElements().add(new LineTo(SIDE / 3d, SIDE)); 
                    break;
    }
    path.getElements().add(new LineTo(0d, SIDE));

    // left
    path.getElements().add(new LineTo(0d, 2d * SIDE / 3d));
    switch (left) {
        case GREATER: path.getElements().add(new MoveTo(0d, SIDE / 3d)); break;
        case EQUAL: path.getElements().add(new LineTo(0d, SIDE / 3d)); break;
        case LOWER: path.getElements().add(new LineTo(SIDE / 5d, SIDE / 2d)); 
                    path.getElements().add(new LineTo(0d, SIDE / 3d)); 
                    break;
    }
    path.getElements().add(new LineTo(0d, 0d));
}

使用此路径，现在我们可以使用文本节点定义区域。

重要的是要注意我们添加Clip来切断从单元格出来的路径的半边界。

public class GreaterCell extends Region {

    public enum Symbol {
        GREATER, EQUAL, LOWER
    }

    private static final double SIDE = 60;
    private final Path path;
    private final Text text;

    private final Symbol top, right, bottom, left;
    private final Rectangle clip;

    public GreaterCell(String number, Symbol top, Symbol right, Symbol bottom, Symbol left) {
        this.top = top;
        this.right = right;
        this.bottom = bottom;
        this.left = left;

        getStyleClass().add("greater-cell");

        path = new Path();
        path.getStyleClass().add("path");

        createPath();

        text = new Text(number);
        text.getStyleClass().add("text");

        getChildren().addAll(path, text);

        clip = new Rectangle(SIDE, SIDE);
        setClip(clip);
    }

    @Override
    protected void layoutChildren() {
        super.layoutChildren();

        resizeRelocate(0, 0, SIDE, SIDE);
        Bounds b = text.getBoundsInParent();
        text.resizeRelocate(SIDE / 2d - b.getWidth() / 2d, SIDE / 2d - b.getHeight() / 2d, SIDE / 2d, SIDE / 2d);
    }
}

现在可以将行定义为：

@Override
public void start(Stage primaryStage) throws Exception {
    GreaterCell tile31 = new GreaterCell("3", LOWER, LOWER, GREATER, EQUAL);
    GreaterCell tile41 = new GreaterCell("6", LOWER, GREATER, GREATER, GREATER);
    GreaterCell tile51 = new GreaterCell("5", GREATER, EQUAL, LOWER, LOWER);
    HBox root = new HBox(0, new Group(tile31), new Group(tile41), new Group(tile51));
    root.setAlignment(Pos.CENTER);
    root.setPadding(new Insets(40));
    Scene scene = new Scene(root, 400, 250);
    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());        
    primaryStage.setScene(scene);
    primaryStage.show();
}

我们将再次提供以上照片：

添加TextField以允许编辑现在是一件容易的事。

private final TextField textField;

private final Symbol top, right, bottom, left;
private final Rectangle clip;

public GreaterCell(String number, Symbol top, Symbol right, Symbol bottom, Symbol left) {
    ...
    textField = new TextField();
    textField.setVisible(false);

    getChildren().addAll(path, textField, text);

    setOnMouseClicked(e -> {
        if (e.getClickCount() == 2) {
            text.setVisible(false);
            textField.setText(text.getText());
            textField.setVisible(true);
            textField.requestFocus();
        }
    });

    textField.setOnAction(e -> {
       textField.setVisible(false);
       text.setVisible(true);
       text.setText(textField.getText());
    });

    textField.focusedProperty().addListener((obs, ov, nv) -> {
        if (! nv) {
            textField.setVisible(false);
            text.setVisible(true);
        }
    });

}

@Override
protected void layoutChildren() {
    super.layoutChildren();

    ...
    textField.resizeRelocate(SIDE / 4d, SIDE / 4d, SIDE / 2d, SIDE / 2d);
}

请注意，创建一个GreaterCellSkin来管理渲染可能会更方便，而控件只会有text属性，但是现在这个简单的方法已经足够了。

<强>的style.css

.greater-cell {
    -fx-background-color: lightgray;
}

.greater-cell > .path {
    -fx-stroke: black;
    -fx-stroke-width: 1.4px;
    -fx-fill: null;
}


.greater-cell > .text {
    -fx-font-size: 2em;
    -fx-alignment: center;
}

.greater-cell > .text-field {
}

<强>箱

要创建一个框，可以方便地使用GridPane控件，它将布置3x3单元格。这部分被排除在这个答案之外。

<强>独

最后，另一个GridPane将布置3x3框。这部分也被排除在这个答案之外。

创建大于数独游戏棋盘

1 个答案: