Question

我正在制作一个简单的绘图草图，我想为用户提供撤消功能。为此，我决定跟踪用户在使用 createGraphics（） 创建的对象中进行的每个笔划（绘制线条，更改颜色......）反过来，在一个像堆栈（LIFO）处理的数组中进行管理。经过一些测试后，我注意到浏览器使用的内存量从未减少，并在p5.js repo中读取，必须使用 remove（）来解决问题，我做了无济于事。

由于我找不到很多关于它的信息，我认为 remove（） 方法可以正常工作，问题出在我的实现中。这是一个复制问题的骨骼草图：

function setup(){
    c = createCanvas(windowWidth, windowHeight);
    mouseClicked = mo;
}

function mo(){
    let ppp = createGraphics(5000, 5000); // oversized to make the memory usage obvious
    ppp.background(color(random(255), random(255), random(255)));
    image(ppp, 0, 0);
    ppp.remove();
    ppp = null;
}

以前的代码片段每次点击都会使用大约100MB的内存，但有趣的是，只有在第三次点击后才开始这样做。

我怎么做错了？如何成功删除使用 createGraphics（） 创建的对象并释放它使用的内存？

Answer 1

显然问题出在p5库中，特别是在p5.Graphics.js中。幸运的是，github的好people来了solution。目前，可以通过使用以下方法覆盖remove函数来解决问题：

p5.Graphics.prototype.remove = function() {
    if (this.elt.parentNode) {
      this.elt.parentNode.removeChild(this.elt);
    }
    var idx = this._pInst._elements.indexOf(this);
    console.log(this._pInst);
    if (idx !== -1) {
      this._pInst._elements.splice(idx, 1);
    }
    for (var elt_ev in this._events) {
      this.elt.removeEventListener(elt_ev, this._events[elt_ev]);
    }
};

使用p5.js使用createGraphics（）生成的对象不会被垃圾回收

1 个答案: