P5.js 绘制新形状导致旧形状消失

Question

我正在做一个复杂的可视化项目，使用 p5.js 我想创建多个形状簇来可视化各种数据，所以我正在遍历数据，检查指定的对象用户并将它们绘制到 canvas，这发生在嵌套的 for 循环中……我面临的问题是当内部循环完成绘制一组形状并且整个循环继续并再次重新进入内部循环时绘制下一个簇，旧的绘制形状簇消失了……我不明白为什么，我认为这与形状与内循环有关 context/scope 并试图重新创建问题基于那个，但事实并非如此。

例如，此代码完美运行，它在 20 行上绘制了 5 个圆圈，运行通过嵌套循环

function setup() {
   createCanvas(window.innerWidth, window.innerHeight).parent('myContainer');
}

function draw() {

   background(220);
   x = 100;
   y = 100;
   for (let i = 1; i <= 20; i++) {
       for(let j=1;j<=5;j++){
        fill(color(0, 255, 0));
        stroke(0);
        ellipse(x, y, 80);

        x += 90;
       }
       x = 100;
       y += 90;
   }
}

而在我的代码中，在内部循环移动到下一个集群之后，之前的形状就消失了，只显示了最后一个集群……我做了很多控制台日志记录和调试，并确保每个集群实际上都得到了画了，但是当创建一个新的时它就消失了……有人能帮忙吗？无论如何要强调图书馆绘制一个新的单独形状......像这样？

new ellipse(x,y,rad)

这是我项目的代码，它显示了错误发生的位置

function setup() {
  createCanvas(viewWidth, viewHeight).parent('myContainer');
}

function draw() {
//code...
  var objects_len = objects.length;
  for (var cluster_index = 1; cluster_index < cluster_len; cluster_index++) {
    array_center = partition(cluster_index - 1, cluster_len - 1);
    for (var object_index = 0; object_index < objects_len; object_index++) {
      if (!objects[object_index].deleted) {
        draw_simple_object(objects[object_index], data, cluster_index, array_center, cluster_len);
      }
    }
    addClusterName(cluster_index, data, array_center);
  }

function draw_simple_object(object, data, cluster_index, array_center, cluster_len) { 
.
.
.
//this is where the drawing happens
    var center_shape = [array_center[0] + object.centerOffsetX * array_center[2], array_center[1] + object.centerOffsetY * array_center[3]];
if (object.shape === 'ellipse' && enable) {
      var size_min = Math.min(array_center[2], array_center[3]) * 2;
      fill(colorFill);
      stroke(object.colorBorder);
      ellipse(center_shape[0], center_shape[1], size_min * width * proportion, size_min * length * proportion);
}
.
.
.
}
}

请帮帮我

Answer 1

会不会是因为你在循环内调用了background()函数？（该部分实际上未显示在您的代码段中）

Answer 2

已解决。

我在 draw() 中的一个函数中使用了 resizeCanvas()，它在调整大小之前清除了 canvas 中的所有内容。删除 resizeCanvas 解决了问题。

P5.js 绘制新形状导致旧形状消失

P5.js Drawing new shapes is causing the older shapes to disappear

javascript

data-visualization

p5.js