java - 创造比数独游戏更伟大的游戏板

Question

你好，我正在尝试制作比数独解算器更强大的解决方案。我用Java制作了回溯算法，该算法从不等式数组输入中解决的问题比数独板更好，现在我想为其制作图形界面，这就是问题。

我想让我的游戏板看起来像这样。我试图在 GridPane 上的 JavaFX 中执行此操作，但我认为我不允许更改网格的板线以将其更改为不等式 (˄ ˅ < >)。然后我试图制作普通的数独方格，并在其上仅显示带有不等号的网格，但我无法使它们与线条匹配。

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

我将非常感谢每一个帮助。

Answer 1

为每个单元格创建控件(具有由较大/较小符号给出的定义形状以及可编辑文本)的一种可能方法如下:

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

路径只会被描边，不会被填充，也不会超出正方形区域，方便在3x3的正方形盒子里堆放9个单元格。

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

例如，这三个单元格:

可以组合成一个 3x1 行:

再多两行，我们将得到一个 3x3 的盒子:

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

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

大细胞

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

public enum Symbol {
    GREATER, EQUAL, LOWER
}

让我们从路径开始。我们将根据四个边的类型使用 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 来管理渲染可能会更方便，而控件只有文本属性，但目前这种简单的方法已经足够了。

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 框。这部分也被排除在这个答案之外。