JavaFX css网格不一致

Question

以下代码生成可无限平移的网格，还允许放大和缩小。网格是使用 css 绘制的。
我的问题是 css 网格在非常接近地放大或缩小很多时不能很好地工作。它也是不一致的，有时只会显示垂直或水平线。我不确定如何可靠地重现它，它有时会发生。
完美的解决方案将类似于 blender 中的网格，其中新线进来替换不再可见的较小线。
创建和设置 css 的部分:

private void reSetStyle(Pane pane) {
        Scene scene = pane.getScene();

        double startPointX = pane.getTranslateX()+(scene.getWidth()/2)+(0.5*scale);
        double endPointX = pane.getTranslateX()+(scene.getWidth()/2)+(10.5*scale);
        double zeroX = pane.getTranslateX()+(scene.getWidth()/2)*scale;

        startPointX = Math.round(startPointX * 1000d)/1000d;
        endPointX = Math.round(endPointX * 1000d)/1000d;
        zeroX = Math.round(zeroX * 1000d)/1000d;

        double startPointY = pane.getTranslateY()+(scene.getHeight()/2)+(0.5*scale);
        double endPointY = pane.getTranslateY()+(scene.getHeight()/2)+(10.5*scale);
        double zeroY = pane.getTranslateY()+(scene.getHeight()/2)*scale;

        startPointY = Math.round(startPointY * 1000d)/1000d;
        endPointY = Math.round(endPointY * 1000d)/1000d;
        zeroY = Math.round(zeroY * 1000d)/1000d;

        pane.getParent().setStyle("-fx-background-color: #393939," +
                "linear-gradient(from "+startPointX+"px "+zeroX+"px to "+endPointX+"px "+zeroX+"px, repeat, #2f2f2f 5%, transparent 6%)," +
                "linear-gradient(from "+zeroY+"px "+startPointY+"px to "+zeroY+"px "+endPointY+"px, repeat, #2f2f2f 5%, transparent 6%);");
}

完整代码:

public class Main extends Application {

    private double scale = 1d, minimumScale = 0.2, maximumScale = 2.5;

    @Override
    public void start(Stage primaryStage) {
        Pane pane = new Pane();
        StackPane stackPane = new StackPane();

        pane.translateXProperty().addListener((observableValue, number, t1) -> reSetStyle(pane));
        pane.translateYProperty().addListener((observableValue, number, t1) -> reSetStyle(pane));
        new Pannable(pane, stackPane);


        stackPane.getChildren().add(pane);
        stackPane.addEventFilter(ScrollEvent.ANY, scrollEvent -> {
            scrollEvent.consume();
            zoom(scrollEvent, pane);
        });

        primaryStage.setTitle("broken css");
        primaryStage.setScene(new Scene(new BorderPane(stackPane), 640, 480));
        primaryStage.show();

        reSetStyle(pane);
    }

    private void zoom(ScrollEvent scrollEvent, Pane pane) {
        if (scrollEvent.getDeltaY() == 0) return;

        double SCALE_DELTA = 0.1;
        double scaleFactor = (scrollEvent.getDeltaY() > 0) ? SCALE_DELTA : -1 * SCALE_DELTA;

        double nonZoomedXOffset = pane.getTranslateX() / scale;
        double nonZoomedYOffset = pane.getTranslateY() / scale;

        //Rounding is needed because java will cause floating point errors otherwise
        scale = clamp(minimumScale, Math.round((pane.getScaleX() + scaleFactor) * 1000d)/1000d, maximumScale);

        pane.setScaleX(scale);
        pane.setScaleY(scale);

        pane.setTranslateX(nonZoomedXOffset * scale);
        pane.setTranslateY(nonZoomedYOffset * scale);

        reSetStyle(pane);
    }

    private void reSetStyle(Pane pane) {
        Scene scene = pane.getScene();

        double startPointX = pane.getTranslateX()+(scene.getWidth()/2)+(0.5*scale);
        double endPointX = pane.getTranslateX()+(scene.getWidth()/2)+(10.5*scale);
        double zeroX = pane.getTranslateX()+(scene.getWidth()/2)*scale;

        startPointX = Math.round(startPointX * 1000d)/1000d;
        endPointX = Math.round(endPointX * 1000d)/1000d;
        zeroX = Math.round(zeroX * 1000d)/1000d;

        double startPointY = pane.getTranslateY()+(scene.getHeight()/2)+(0.5*scale);
        double endPointY = pane.getTranslateY()+(scene.getHeight()/2)+(10.5*scale);
        double zeroY = pane.getTranslateY()+(scene.getHeight()/2)*scale;

        startPointY = Math.round(startPointY * 1000d)/1000d;
        endPointY = Math.round(endPointY * 1000d)/1000d;
        zeroY = Math.round(zeroY * 1000d)/1000d;

        pane.getParent().setStyle("-fx-background-color: #393939," +
                "linear-gradient(from "+startPointX+"px "+zeroX+"px to "+endPointX+"px "+zeroX+"px, repeat, #2f2f2f 5%, transparent 6%)," +
                "linear-gradient(from "+zeroY+"px "+startPointY+"px to "+zeroY+"px "+endPointY+"px, repeat, #2f2f2f 5%, transparent 6%);");
    }

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

    private static class Pannable implements EventHandler<MouseEvent> {
        private double lastMouseX = 0, lastMouseY = 0;

        private final Node eventNode;
        private final Node dragNode;

        public Pannable(final Node dragNode, final Node eventNode) {
            this.eventNode = eventNode;
            this.dragNode = dragNode;
            this.eventNode.addEventHandler(MouseEvent.ANY, this);
        }

        @Override
        public final void handle(final MouseEvent event) {
            if(!event.isPrimaryButtonDown() && !event.isMiddleButtonDown()) return;

            if (MouseEvent.MOUSE_PRESSED == event.getEventType()) {
                if (this.eventNode.contains(event.getX(), event.getY())) {
                    this.lastMouseX = event.getSceneX();
                    this.lastMouseY = event.getSceneY();
                    event.consume();
                }
            } else if (MouseEvent.MOUSE_DRAGGED == event.getEventType()) {
                ((Node) event.getSource()).setCursor(Cursor.MOVE);

                final double deltaX = (event.getSceneX() - this.lastMouseX);
                final double deltaY = (event.getSceneY() - this.lastMouseY);

                final double initialTranslateX = dragNode.getTranslateX();
                final double initialTranslateY = dragNode.getTranslateY();
                dragNode.setTranslateX(initialTranslateX+deltaX);
                dragNode.setTranslateY(initialTranslateY+deltaY);

                this.lastMouseX = event.getSceneX();
                this.lastMouseY = event.getSceneY();
            }
        }
    }
}

Answer 1

据我所知，您采用的方法非常简单明了，与其他方法相比，这简化了逻辑。
话虽如此，不受欢迎的行为的原因是由于依赖于颜色停止的 % 值，它将根据基值不断变化。我没有对此进行深入调查，但我非常确信这可能是原因:)。
所以 % 的替代方法是依靠“px”。 但是这里有问题... JavaFX CSSParser.java 类中存在错误，其中通过 CSS 应用基于“px”的颜色停止的线性渐变无法正常工作。
要解决这个问题，请使用“setBackground”API 设置背景，而不是通过“setStyle”设置背景。我的意思是，而不是像这样设置

String grad = "linear-gradient(from "+xStart+"px 0px to " + xEnd + "px 0px , repeat, transparent " + (gridSize - 1) + "px, #ffffff50 1px)";
pane.getParent().setStyle("-fx-background-color:"+grad);

使用以下方法设置背景:

String grad = "linear-gradient(from "+xStart+"px 0px to " + xEnd + "px 0px , repeat, transparent " + (gridSize - 1) + "px, #ffffff50 1px)";
Background background = new Background(new BackgroundFill(LinearGradient.valueOf(grad ), CornerRadii.EMPTY, Insets.EMPTY));
((StackPane) pane.getParent()).setBackground(background);

使用“%”色标还有另一个问题。网格线的宽度将不一致。我的意思是你不能在不同的尺度上保持相同的 px(比如 1px)。您可以在演示中注意到这一点。
因此，考虑到所有这些，我只更改了 resetStyle 方法的代码如下(可能需要微调)，输出显示在附加的 gif 中。

private void reSetStyle(Pane pane) {
        Scene scene = pane.getScene();
        double defaultBlockSize = 50;//px Default size of the grid at 100% scale
        double gridSize = Math.ceil(defaultBlockSize * scale);
        double xStart = Math.ceil(pane.getTranslateX()+scene.getWidth()/2);
        double xEnd = xStart+ gridSize;
        double yStart = Math.ceil(pane.getTranslateY()+scene.getHeight()/2);
        double yEnd = yStart+gridSize;
        double linePx = 2; // the line thickness in px
        String vLines = "linear-gradient(from "+xStart+"px 0px to " + xEnd + "px 0px , repeat, transparent " + (gridSize - linePx) + "px, #ffffff50 1px)";
        String hLines = "linear-gradient(from 0px "+yStart+"px to 0px " + yEnd + "px , repeat, transparent " + (gridSize - linePx) + "px , #ffffff50 1px )";
        Background background = new Background(new BackgroundFill(Paint.valueOf("#393939"), CornerRadii.EMPTY, Insets.EMPTY),
                new BackgroundFill(LinearGradient.valueOf(vLines), CornerRadii.EMPTY, Insets.EMPTY),
                new BackgroundFill(LinearGradient.valueOf(hLines), CornerRadii.EMPTY, Insets.EMPTY));
        ((StackPane) pane.getParent()).setBackground(background);
    }

我希望您已经非常了解 JavaFX 渐变。但以防万一你可以引用这个博客 JavaFX Gradients如果您需要更多详细信息。这是我在 2012 年写的非常老的博客。我认为没有什么改变;)
[更新]:我刚刚在代码中发现了一些小故障。一旦我解决了这个问题，将再次更新答案。
[更新 2]:看起来渐变在尝试渲染一些浮点值时有问题。对这些值进行四舍五入后，问题似乎已解决。还更新了代码以在中心设置缩放点。你能不能试一试。我更新了我的代码和 gif。
[更新 3]:线条粗细说明
“gridSize”是我们为线性渐变设置的渲染量。渐变在这个大小之后重复。所以给定两种颜色， <color1 stop1>, <color2 stop2> <color1>渲染到 <stop1>数量(px)然后从那里 <color2>开始渲染直到 <stop2> .在这种情况下，stop2 值无关紧要(可以是 1px 或 2px 甚至 100px)。所以几乎 stop1 值将决定线条粗细(又名第二颜色渲染)。下面的图片可以给你一些快速的解释。