缩放父级时节点之间的 JavaFX 背景可见

Question

我有一个面板，里面有一个 Canvas 网格。当这些 Canvas 被着色并且我更改 Pane 的比例时， Canvas 之间会出现白线。

缩放前的图像

缩放图像

代码当前有一个场景，其中有一个 Pane 。当拖动鼠标时，它使用 HashMap 在该位置找到一个 Canvas ，该 HashMap 按 x 和 y 索引存储所有 Canvas ，找到的 Canvas 为黑色。滚动鼠标时， Pane 的比例会更改 0.1。

代码:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import java.util.HashMap;
import java.util.Map;
import java.util.Objects;

public class Main extends Application {

    private static final double SIZE = 10;

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

    @Override
    public void start(Stage stage) {
        Pane pane = new Pane();

        Scene scene = new Scene(pane);

        pane.setOnMouseDragged(mouseEvent -> {
            int x = (int) (mouseEvent.getX() / SIZE);
            int y = (int) (mouseEvent.getY() / SIZE);

            Plot plot = new Plot(x, y);
            Canvas canvas = canvases.computeIfAbsent(plot, plot1 -> {
                Canvas newCanvas = new Canvas(SIZE, SIZE);
                pane.getChildren().add(newCanvas);
                newCanvas.setLayoutX(x * SIZE);
                newCanvas.setLayoutY(y * SIZE);
                return newCanvas;
            });

            canvas.getGraphicsContext2D().setFill(Color.BLACK);
            canvas.getGraphicsContext2D().fillRect(0, 0, 50, 50);
        });

        scene.setOnScroll(scrollEvent -> {
            double scale = pane.getScaleX() + (scrollEvent.getDeltaY() > 0 ? 0.01 : -0.01);

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

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

    private static class Plot {
        private final int x;
        private final int y;

        private Plot(int x, int y) {
            this.x = x;
            this.y = y;
        }

        @Override
        public boolean equals(Object o) {
            if (this == o) return true;
            if (o == null || getClass() != o.getClass()) return false;
            Plot plot = (Plot) o;
            return x == plot.x &&
                    y == plot.y;
        }

        @Override
        public int hashCode() {
            return Objects.hash(x, y);
        }
    }

    private final Map<Plot, Canvas> canvases = new HashMap<>();



}

Answer 1

我最初的猜测是可能是因为使用了 Canvas 节点，它与边界别名问题有关。所以我尝试将所有 Canvas 节点替换为 Rectangles。但问题仍然存在。我相信应该会发生一些与使用 x 和 y 进行布局相关的事情。

虽然我无法告诉您这个问题的确切原因，但我可以建议一种替代方法。请注意，我不知道此实现的最终用途，也不知道您为什么将 Canvas 保留在 map 中。因此，以下方法是让您知道或指导您如何修复它。

替代方法#1:

与其使用许多 Canvas 节点，不如尝试只定义一个适合 Pane 的 Canvas 节点，并在绘制时绘制 Canvas 。在检查缩放时，间距没有任何问题(因为它只有一个节点)。

请查看下面的演示:

[更新]

替代方法#2:

另一种方法是使用路径节点。这种方法也只对整个绘图使用一个节点。使用它的另一个好处是，如果您想选择不同的画笔颜色，您可以创建任意数量的路径。另一个优点是您可以像在最初的实现中那样绘制负坐标。

这个想法与 Canvas 方法几乎相同。拖动时，您使用鼠标坐标绘制框的路径。我更新了下面演示中的代码。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;

import java.util.ArrayList;
import java.util.List;
import java.util.Objects;

public class CanvasDrawing extends Application {

    private static final double SIZE = 10;

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

    @Override
    public void start(Stage stage) {
        Pane pane = new Pane();
        pane.setStyle("-fx-background-color:white;");

        // approachUsingCanvas(pane);
        approachUsingPath(pane);

        Scene scene = new Scene(pane,Color.RED);
        scene.setOnScroll(scrollEvent -> {
            double scale = pane.getScaleX() + (scrollEvent.getDeltaY() > 0 ? 0.01 : -0.01);
            pane.setScaleX(scale);
            pane.setScaleY(scale);
        });
        stage.setScene(scene);
        stage.setTitle("Canvas Drawing");
        stage.show();
    }

    private void approachUsingPath(Pane pane) {
        Path path = new Path();
        path.setStrokeWidth(1);
        path.setStroke(Color.BLACK);
        path.setFill(Color.BLACK);
        pane.getChildren().add(path);
        pane.setOnMouseDragged(mouseEvent -> {
            int x = (int) (mouseEvent.getX() / SIZE);
            int y = (int) (mouseEvent.getY() / SIZE);
            Plot plot = new Plot(x, y);
            if(!plots.contains(plot)){
                plots.add(plot);
                double sx = x * SIZE;
                double sy = y * SIZE;
                // Draw the box using Path
                path.getElements().addAll(new MoveTo(sx,sy),
                        new LineTo(sx+SIZE,sy),
                        new LineTo(sx+SIZE,sy+SIZE),
                        new LineTo(sx,sy+SIZE),
                        new LineTo(sx,sy));
            }
        });
    }

    private void approachUsingCanvas(Pane pane){
        Canvas canvas = new Canvas();
        canvas.widthProperty().bind(pane.widthProperty());
        canvas.heightProperty().bind(pane.heightProperty());
        canvas.getGraphicsContext2D().setFill(Color.BLACK);
        pane.getChildren().add(canvas);

        pane.setOnMouseDragged(mouseEvent -> {
            int x = (int) (mouseEvent.getX() / SIZE);
            int y = (int) (mouseEvent.getY() / SIZE);
            Plot plot = new Plot(x, y);
            if(!plots.contains(plot)){
                plots.add(plot);
                double sx = x * SIZE;
                double sy = y * SIZE;
                canvas.getGraphicsContext2D().fillRect(sx, sy, SIZE, SIZE);
            }
        });
    }

    private static class Plot {
        private final int x;
        private final int y;

        private Plot(int x, int y) {
            this.x = x;
            this.y = y;
        }

        @Override
        public boolean equals(Object o) {
            if (this == o) return true;
            if (o == null || getClass() != o.getClass()) return false;
            Plot plot = (Plot) o;
            return x == plot.x &&
                    y == plot.y;
        }

        @Override
        public int hashCode() {
            return Objects.hash(x, y);
        }
    }

    private final List<Plot> plots = new ArrayList<>();
}