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）p5.js有一个tiledmap.js库，但我仍然在阅读它的源代码，现在它看起来并没有为整个库提供1个缓冲区tilemap的。

2）有一个clear function来清除画布图形，它确实清晰，但它清除了给定缓冲区上的所有内容。

Answer 1

您应该可以使用set()功能。更多信息可以在the reference找到。

我希望这样的事情可以发挥作用：

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

不幸的是，这似乎只设置了一个像素。这对我来说闻起来像个臭虫，所以我已经在GitHub上提交了this bug。

与您发现的一样，您也可以直接设置像素值。这可能比你现在拥有的更简单：

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);
}

请注意，需要权衡：此代码更简单，但速度也更慢。

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

1 个答案: