graphicscontext.clearRect() 仅部分清除绘制区域

Question

更新了我的问题以满足最小的可重现示例。 我正在创建一个简单的绘图应用程序，用户可以在其中进行免费绘图。

我希望用户能够撤消画布上的最后一幅画。 为此，我将mouseclicked和mousedragged位置 (x, y) 保存在两个ArrayLists中，然后使用保存的位置通过图形上下文的clearRect()函数清除它。 但是clearRect()并没有清除所有内容。 我尝试在HashMap和double[][]中保存坐标，但我得到了相同的结果。 我会为这个问题尝试不同的方法（分层画布），但我真的很想了解这个问题。 我附在下面的屏幕截图下方，说明了绘制的内容和清除的内容以及使用Redo按钮重新绘制的内容。 相关代码：

import java.util.ArrayList;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class DrawOnCanvas extends Application {

    Scene scene;
    Pane canvasPane, buttonPane;
    BorderPane mainPane;
    Canvas canvas;
    GraphicsContext gxc;
    Button undoButton, redoButton;
    private ArrayList<Double> xPos = new ArrayList<>();
    private ArrayList<Double> yPos = new ArrayList<>();

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

    @Override
    public void start(Stage stage) throws Exception {
        mainPane = new BorderPane();
        canvasPane = new Pane();
        buttonPane = new Pane();
        canvas = new Canvas(500, 500);
        canvasPane.setStyle("-fx-border-color: black");
        gxc = canvas.getGraphicsContext2D();
        gxc.setLineWidth(2);
        undoButton = new Button("Undo");
        redoButton = new Button("Redo");
        redoButton.relocate(200, 0);
        canvasPane.getChildren().add(canvas);
        buttonPane.getChildren().addAll(undoButton, redoButton);
        mainPane.setCenter(canvasPane);
        mainPane.setBottom(buttonPane);
        scene = new Scene(mainPane);
        startDrawing(gxc, canvas);
        undoDrawing(gxc, undoButton);
        redoDrawing(gxc, redoButton);
        stage = new Stage();
        stage.setScene(scene);
        stage.show();
    }

    public void startDrawing(GraphicsContext gc, Canvas can) {
        can.setOnMousePressed(e -> {
            gc.beginPath();
            gc.moveTo(e.getX(), e.getY());
            gc.stroke();
            xPos.add(e.getX());
            yPos.add(e.getY());
        });
        can.setOnMouseDragged(e -> {
            gc.lineTo(e.getX(), e.getY());
            gc.stroke();
            gc.closePath();
            gc.beginPath();
            gc.moveTo(e.getX(), e.getY());
            xPos.add(e.getX());
            yPos.add(e.getY());
        });
    }

    public void undoDrawing(GraphicsContext gCon, Button undo) {
        undo.setOnMouseClicked(e -> {
            for (int i = 0; i < xPos.size(); i++) {
                System.out.println(xPos.get(i) + " " + yPos.get(i));
                gCon.clearRect(xPos.get(i) - 2, yPos.get(i) - 2, 5, 5);
            }
        });
    }

    public void redoDrawing(GraphicsContext gCon, Button undo) {
        undo.setOnMouseClicked(e -> {
            for (int i = 0; i < xPos.size(); i++) {
                gCon.fillRect(xPos.get(i) - 2, yPos.get(i) - 2, 5, 5);
                System.out.println(xPos.get(i) + " " + yPos.get(i));
            }
        });
    }
}

画布上的绘制区域：

画布上的清除区域：

画布上的重绘区域：