从 p5js 中的 canvas 个图形中删除元素

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

所以基本上，如果您制作一个空数组，并且每次按下鼠标都会推送一个随机名称，该名称描述您的 ellipse/any 形状以及当前鼠标位置 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

从 p5js 中的 canvas 个图形中删除元素

delete elements from canvas graphics in p5js

p5.js