从 p5js 中的画布图形中删除元素

Question

我使用canvas图形绘制对象，需要撤消最后绘制的对象，但找不到从图形中删除最后一个对象的选项，请建议如何删除最后一个对象（即创建撤消功能）

下面是 setup() 中的代码 -

    canvas=createCanvas(1000,1000);
    canvsGraphics = createGraphics(1000,1000);

下面是在 mouseDragged() 函数中创建的对象 -

noStroke(); 
        fill(R,G,B);
        rectMode(CENTER);
        rect(mouseX,mouseY,20,20);

    //CREATES BUFFER
    canvsGraphics.noStroke();
    canvsGraphics.fill(R,G,B);
    canvsGraphics.rectMode(CENTER);
    canvsGraphics.rect(mouseX,mouseY,20,20);

Answer 1

您不能在绘制对象后就删除它。

但是您可以使用background() 函数清除所有对象，然后重新绘制您仍想查看的所有对象。

您可以考虑创建一个包含所有对象的数据结构。然后每一帧，循环遍历该数据结构并绘制每个对象。要删除对象，只需将其从数据结构中删除即可。

Answer 2

所以基本上，如果您创建一个空数组并且每次鼠标按下都会推送一个随机名称，该名称描述您当前鼠标位置 X 和 Y 的椭圆/任何形状，在您一直运行的绘图函数中循环遍历数组，在 for循环评估您想在什么位置绘制什么形状。查看代码以更好地理解。

var canvas;
var posX;
var posY;
var pg;
var arr = [];

function setup() {
    let WndH = 620;
    canvas = createCanvas(WndH, WndH);
    canvas.position(200,50);
    canvas.mousePressed(func);
}

function func() {
    posX = mouseX;
    posY = mouseY;
    arr.push("e",posX,posY);
}

function draw() {
    background(200);
    fill(255);
    for (i = 0; i < arr.length; i++) {
        if(arr[i] == "e") {
            ellipse(arr[i + 1], arr[i + 2], 100, 100);
            i += 2;
        }
    }
}

so the first image is when i run the code but didn't yet take any action(mouse press)

this 2nd image is of me clicking around randomly on the canvas