p5.js - 无法使用 createGraphics 在 p5.js 中撤消绘图

Question

我正在尝试通过创建缓冲区然后清除它来为 p5.js 中的橡皮擦创建撤消功能。但是，我无法让它完全工作。我认为这个问题是由于 draw() 中的不断循环，但我尝试了各种方法，包括 redraw() 和 noLoop()，但在擦除后清除缓冲区方面收效甚微（基本上是用白色椭圆绘制）。我的代码如下：

    function Eraser () {
    
    
        var offScreenBuffer = createGraphics(width, height);
    
        this.draw = function () {
            
            erase();
            
        };
        
        var erase = function () {
            
            image(offScreenBuffer, 0, 0);
            
            var eraserSize = 15;
                    
            if (mouseIsPressed) {
                offScreenBuffer.stroke(255);
                offScreenBuffer.fill(255);
                offScreenBuffer.ellipse(mouseX + eraserSize, mouseY + eraserSize, eraserSize, eraserSize);
            }
            
            
        };
        
        function keyPressed () {
            
            if (value === 'z') {
                offScreenBuffer.clear();
            }    

        };
}

标签： p5.js