GridPane與ScrollPane內部的間隙渲染錯誤

Question

我想要一個帶有正方形單元格的矩形網格，可以將其縮放和拖動（就像繪制地圖一樣）。 因此，我將其放在ScrollPane中，盡管在某些尺寸下它的表現相當怪異。 網格的大小將動態變化。

圖片上有一個20x20的網格。

1. 並非所有間隙都顯示在網格內。 請注意，它應該是20平方，但不是。 Vgap和Hgap均為1。
2. 網格本身大於content ，這不好，因為當縮放時，我可以拖動到網格的邊界之外。
3. 當它小於滾動窗格時，我想將GridPane置於ScrollPane內部 。 （ Gridpane alignment="CENTER"顯然沒有執行任何操作）

---

最小，完整和可驗證的示例

FXML：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.GridPane?>

<ScrollPane hbarPolicy="NEVER" hvalue="0.5" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" pannable="true" prefHeight="400.0" prefWidth="600.0" vbarPolicy="NEVER" vvalue="0.5" xmlns="http://javafx.com/javafx/9" xmlns:fx="http://javafx.com/fxml/1" fx:controller="bug.app.Bug">
    <GridPane fx:id="gridPane" alignment="CENTER" hgap="1.0" style="-fx-background-color: red;" vgap="1.0">
    </GridPane>
</ScrollPane>

控制器+主電源：

package bug.app;

import javafx.application.Application;
import javafx.beans.binding.DoubleBinding;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class Bug extends Application {
    private static final int HEIGHT = 20;
    private static final int WIDTH = 20;
    private static final double MIN_CELL_SIZE = 2;
    @FXML private GridPane gridPane;
    private DoubleProperty zoomRatio = new SimpleDoubleProperty(5);

    @FXML
    private void initialize() {
        final DoubleBinding cellSizeBinding = zoomRatio.multiply(MIN_CELL_SIZE);

        List<Node> cells = new ArrayList<>(HEIGHT * WIDTH);
        for (int row = 0; row < HEIGHT; row++) {
            for (int col = 0; col < WIDTH; col++) {
                final Pane cell = new Pane();
                cell.setBackground(new Background(new BackgroundFill(Color.YELLOW, CornerRadii.EMPTY, Insets.EMPTY)));

                cell.setMinSize(MIN_CELL_SIZE, MIN_CELL_SIZE);
                cell.setMaxWidth(Region.USE_PREF_SIZE);
                cell.setMaxHeight(Region.USE_PREF_SIZE);
                cell.prefWidthProperty().bind(cellSizeBinding);
                cell.prefHeightProperty().bind(cellSizeBinding);

                GridPane.setConstraints(cell, col, row, 1, 1);

                cells.add(cell);
            }
        }
        gridPane.getChildren().clear();
        gridPane.getChildren().addAll(cells);
    }

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

    @Override
    public void start(Stage primaryStage) throws IOException {
        Parent root = FXMLLoader.load(
                getClass().getResource("/view/bugView.fxml"));
        final Scene scene = new Scene(root, 600, 400);

        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

---

注意：我選擇“窗格”作為單元是因為我想對其進行子類化，並最終用不同的顏色將其填充（可能是“形狀”？），將正方形分為1-4個部分。 想象兩個或四個三角形形成一個正方形。 我還想優雅地調整大小（“ AFAIK形狀”無法調整大小），也許以某種方式將內部“形狀”的大小綁定到“窗格”的大小會產生神奇的效果。 我還沒有那么遠，但是也可以就此提出建議。

Answer 1

將網格窗格包裝在堆棧窗格中，這將使網格窗格居中

Answer 2

問題1和2

我發現了針對問題1.和2.的解決方法，它忽略了Vgap和Hgap，因為顯然它有問題。

我沒有使用GridPane的gap屬性，而是在每個像元上設置了邊距：

GridPane.setMargin(cell, new Insets(0.5));

但是，由於在snapToPixel="true"上使用默認的snapToPixel="true" ，因此將余量snapToPixel="true"為1，從而導致2px的間隙。 這很不方便，因為我希望正方形小到2x2px，所以2px的間隙太大了。 我可能會在snapToPixel設置為false 。 需要更多測試。

問題3

我嘗試按照@Silas Gyeme的建議將GridPane包裝在StackPane中。

僅將其包裝在StackPane中是不夠的。 我必須在ScrollPane上同時設置fitToHeight="true"和fitToWidth="true" 。

還必須將單元格的minSize綁定到cellSizeBinding，因為當我縮小窗口時，它正在調整正方形的大小。

cell.minWidthProperty().bind(cellSizeBinding);
cell.minHeightProperty().bind(cellSizeBinding);

編輯：我試圖省略StackPane，我實際上並不需要它！ 僅設置fitToHeight和fitToWidth就足夠了，GridPane可以很好地拉伸。