如何將邊緣添加到網格窗格

Question

我正在努力編寫一個程序，該程序需要我使用 GUI 和 MVC 設計模式制作一個非圖形游戲。 由於它是一個非圖游戲，我需要創建一個網格。 一個非圖游戲應該是這樣的：

這是我在 GridPane 中創建矩形得到的結果：

但我不知道如何在我創建的網格周圍添加包含游戲線索的邊緣。

這是我的代碼：

public class PuzzleView implements FXComponent {

  private Controller controller;
  Model model;

  public PuzzleView(Controller controller) {
    this.controller = controller;
    model = ((ControllerImpl) controller).getModel();
  }
So
  @Override
  public Parent render() {

    GridPane board = new GridPane();
    double width = 30;
    board.setLayoutX(300);
    board.setLayoutY(300);
    int h = model.getHeight();
    int w = model.getWidth();

    Rectangle[][] rec = new Rectangle[w][h];

    for (int i = 0; i < w; i++) {
      for (int j = 0; j < h; j++) {
        rec[i][j] = new Rectangle();
        rec[i][j].setX(i * width);
        rec[i][j].setY(j * width);
        rec[i][j].setWidth(width);
        rec[i][j].setHeight(width);
        rec[i][j].setFill(Color.WHITE);
        rec[i][j].setStroke(Color.BLACK);
        board.add(rec[i][j], i, j);
      }
    }

Answer 1

考慮使用 JavaFX Control （或Pane ）而不是 shape 來表示網格單元，並使用 4 GridPane來表示板的不同區域：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class MonogramBoard extends Application {

    private static final int BOARD_SIZE = 5, HINT_SIZE = 2;

    @Override
    public void start(Stage primary) {
        Node corner = new Board(HINT_SIZE, HINT_SIZE, false, false).getNode();
        Node topHint = new Board(HINT_SIZE, BOARD_SIZE, true, true).getNode();
        HBox topPane = new HBox(corner, topHint);

        Node leftHint =  new Board(BOARD_SIZE,HINT_SIZE, true, true).getNode();
        Node board = new Board(BOARD_SIZE, BOARD_SIZE, true, true).getNode();
        HBox bottomPane = new HBox(leftHint, board);
        VBox root = new VBox(topPane, bottomPane);
        root.setPadding(new Insets(10));
        primary.setScene(new Scene(root));
        primary.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

class Board{
    private final GridPane grid;

    public Board(int rows, int columns, boolean isBorder, boolean isGridLines) {
        grid = new GridPane();
        grid.setPadding(new Insets(1));
        if(isBorder) {
            grid.setStyle("-fx-background-color: white; -fx-border-color: black ; -fx-border-width: 2px");
        }else{
            grid.setStyle("-fx-background-color: white; -fx-border-color: white ; -fx-border-width: 2px");
        }
        for(int row = 0; row < rows; row++){
            for(int col = 0; col < columns; col++){
                grid.add(new Cell(isGridLines).getNode(), col, row);
            }
        }
    }

    Node getNode() {return grid; }
}

//represents a single cell
class Cell{
    private final Label label;
    private final int CELL_SIZE = 50;

    Cell(){
        this(true);
    }

    Cell(boolean isBorder){

        label = new Label();
        if(isBorder) {
            label.setStyle("-fx-background-color: white; -fx-border-color: black ; -fx-border-width: 1px");
        }else{
            label.setStyle("-fx-background-color: white; -fx-border-color: white ; -fx-border-width: 1px");
        }
        label.setPrefSize(CELL_SIZE,CELL_SIZE);
    }

    Node getNode() {return label; }
}

---

Answer 2

在布局方面，將有不止一種方法來解決它。 您可以選擇評論中建議的方式，也可以使用以下方法 go。

下面的方法依賴於使用 CSS 設置邊框樣式。 通過這種方式，您可以准確地獲得您所期望的外觀，並且也可以完美地適用於任何尺寸的電路板。

首先，您將提示部分和拼圖部分分成單獨的網格窗格。 這樣您就可以對各個部分進行更多控制。

然后在網格窗格中設置網格窗格和框的樣式以獲得所需的樣式。 在第二個屏幕截圖中，我添加了間距以展示每個網格窗格和框的樣式以實現最終外觀。

關鍵是您專門設置每個邊框邊寬（0px、1px 或 2px）。 渲染最終布局后，您將獲得所需的外觀。

請查看以下演示：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.util.stream.Stream;

public class GridPaneBordersDemo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
         double width = 30; // each box size
        int rows = 8; // Main box rows & cols
        int cols = 6;
        int topHintRows = 3;
        int sideHintCols = 4;

        // Top hint pane
        GridPane topHint = new GridPane();
        topHint.getStyleClass().add("topHintPane");
        for (int i = 0; i < cols; i++) {
            for (int j = 0; j < topHintRows; j++) {
                StackPane box = getBox(width);
                box.getStyleClass().add("topHintBox");
                topHint.add(box, i, j);
            }
        }

        // Side hint pane
        GridPane sideHint = new GridPane();
        sideHint.getStyleClass().add("sideHintPane");
        for (int i = 0; i < sideHintCols; i++) {
            for (int j = 0; j < rows; j++) {
                StackPane box = getBox(width);
                box.getStyleClass().add("sideHintBox");
                sideHint.add(box, i, j);
            }
        }

        // Main Puzzle
        GridPane mainPuzzle = new GridPane();
        mainPuzzle.getStyleClass().add("puzzlePane");
        for (int i = 0; i < cols; i++) {
            for (int j = 0; j < rows; j++) {
                StackPane box = getBox(width);
                box.getStyleClass().add("puzzleBox");
                mainPuzzle.add(box, i, j);
            }
        }

        GridPane emptyGrid = new GridPane();
        emptyGrid.getStyleClass().add("emptyGrid");

        GridPane pane = new GridPane();
        pane.setPadding(new Insets(10));
        pane.add(emptyGrid,0,0);
        pane.add(topHint,1,0);
        pane.add(sideHint,0,1);
        pane.add(mainPuzzle,1,1);

        CheckBox checkBox = new CheckBox("Show spacing");
        checkBox.selectedProperty().addListener((obs,old,val)->{
            double gap = val?10:0;
            Insets insets = val? new Insets(10):Insets.EMPTY;
            Stream.of(pane,topHint,sideHint,mainPuzzle,emptyGrid).forEach(grid->{
                grid.setHgap(gap);
                grid.setVgap(gap);
                grid.setPadding(insets);
                stage.sizeToScene();
            });
        });
        VBox root =new VBox(checkBox,pane);
        root.setSpacing(10);
        root.setPadding(new Insets(10));
        Scene scene = new Scene(root);
        scene.getStylesheets().add(getClass().getResource("grid.css").toExternalForm());
        stage.setScene(scene);
        stage.setTitle("GridPane Border");
        stage.setOnShown(e->stage.sizeToScene());
        stage.show();

    }

    private StackPane getBox(double width){
        StackPane box = new StackPane();
        box.setMinSize(width,width);
        box.setMaxSize(width,width);
        box.getStyleClass().add("box");
        return box;
    }
}

CSS 代碼（grid.css）：

.emptyGrid{
   -fx-border-width: 0px 1px 1px 0px;
   -fx-border-color: black;
}

.topHintPane{
   -fx-border-width: 2px 1px 1px 1px;
   -fx-border-color: black;
}

.sideHintPane{
   -fx-border-width: 1px 1px 1px 2px;
   -fx-border-color: black;
}

.puzzlePane{
   -fx-border-width: 1px;
   -fx-border-color: black;
}

.box{
  -fx-background-color:transparent ;
}

.topHintBox{
   -fx-border-width: 0px 1px 0px 0px;
   -fx-border-color: black;
}

.sideHintBox{
   -fx-border-width: 0px 0px 1px 0px;
   -fx-border-color: black;
}

.puzzleBox{
   -fx-border-width: 0px 1px 1px 0px;
   -fx-border-color: black;
}

我再次提醒您，您也可以通過其他方法實現。 這只是使用單個框和 gridPane 樣式的一種方式。