javascript - 如何使用 p5.js 清除部分缓冲图像

Question

我正在使用带有 p5.js 框架的 javascript。我创建了一个离屏图形缓冲区。现在我想清除该缓冲区的一部分(因此它再次变得不可见)。最好的方法是什么？

现在我只能通过直接更改我需要的每个像素的 alpha 值来实现。

这是一个 MCVE:

// sketch.js, requires p5.js

function setup() {
  createCanvas(100,100);
  background(0);
  let mymap = createGraphics(100,100);
  mymap.fill(255);
  mymap.rect(20,20,40,40);
  mymap.loadPixels();
  for (let i = 23; i < 37; i++) {
    for (let j = 23; j < 37; j++) {
      mymap.pixels[400*i+4*j+3] = 0;
    }
  }
  mymap.updatePixels();
  image(mymap,0,0);
}

一些旁注:

1) 有一个 tiledmap.js p5.j​​s 的库，但我仍在阅读它的源代码，现在看起来他们没有为整个 tilemap 提供 1 个缓冲区。

2) 有一个 clear function要清除 Canvas 图形，它会清除一些东西，但它会清除给定缓冲区中的所有内容。

Answer 1

您应该能够使用 set() 函数。更多信息可以在 the reference 中找到.

我希望这样的事情能起作用:

const transparency = createGraphics(20, 20);
mymap.set(30, 30, transparency);
mymap.updatePixels();

不幸的是，这似乎只设置了一个像素。这对我来说就像一个错误，所以我提交了 this bug在 GitHub 上。

如您所见，您也可以直接设置像素值。这可能比您目前拥有的更简单:

let mymap;

function setup() {
  createCanvas(100,100);
  mymap = createGraphics(100,100);
  mymap.fill(255, 0, 0);
  mymap.rect(20,20,40,40);

    for(let y = 30; y < 50; y++){
        for(let x = 30; x < 50; x++){
            mymap.set(x, y, color(0, 0, 0, 0));
        }
    }

    mymap.updatePixels();
}

function draw() {
  background(0, 255, 0);
  image(mymap,0,0);
}

请注意，这里有一个权衡:这段代码更简单，但也更慢。