时间戳

首页 > 解决方案 > P5.js 绘制新形状会导致旧形状消失

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

问题描述

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

例如，此代码完美运行，它在 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);
}
.
.
.
}
}

请帮我

标签： javascriptdata-visualizationp5.js

解决方案

解决了。

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

推荐阅读