PixiJS FillGradient 内存泄漏

Question

我在 Pixi 中的图形对象上填充渐变时遇到内存问题。每当我这样填充我的对象时：

export class PixiCurve extends AContainerComponent {
  public curve = new Graphics();
  container = new Container();

  private pixiEdges: PixiEdges;

  private multiplierRef: MutableRefObject<number>;
  private gradientFill: FillGradient = new FillGradient(0, 0, 0, 0);

  constructor(pixiEdges: PixiEdges, multiplierRef: MutableRefObject<number>) {
    super();
    this.pixiEdges = pixiEdges;
    this.multiplierRef = multiplierRef;

    this.gradientFill.x0 = this.pixiEdges.leftEdge;
    this.gradientFill.y1 = this.pixiEdges.bottomEdge;
    this.gradientFill.x1 = this.pixiEdges.leftEdge;
    this.gradientFill.addColorStop(0, new Color('#de3249'));
    this.gradientFill.addColorStop(1, new Color('#de324900'));

    this.curve.label = 'bezierCurve';
  }

  public drawBezierCurve(x: number, y: number) {
    this.container.removeChild(this.curve);
    this.curve.destroy({ children: true });
    this.curve = new Graphics();
    this.container.addChild(this.curve);

    this.curve.moveTo(this.pixiEdges.leftEdge, this.pixiEdges.bottomEdge);
    const controlX =
      this.pixiEdges.leftEdge + (x - this.pixiEdges.leftEdge) * 0.5;
    const controlY = this.pixiEdges.bottomEdge - this.multiplierRef.current;
    this.curve.quadraticCurveTo(controlX, controlY, x, y);
    this.curve.stroke({ color: 0xde3249, width: 2, alpha: 1 });

    this.curve.moveTo(this.pixiEdges.leftEdge, this.pixiEdges.bottomEdge);
    this.curve.quadraticCurveTo(controlX, controlY, x, y);
    this.curve.lineTo(x, this.pixiEdges.bottomEdge);
    this.curve.lineTo(this.pixiEdges.leftEdge, this.pixiEdges.bottomEdge);

    this.gradientFill.y0 = y;

    this.curve.fill(this.gradientFill);
  }
}

Pixi 统计数据显示纹理计数不断增加，应用程序在几分钟内崩溃。每当我只填充纯色时，就不会出现此问题。

关于如何实现这一目标有什么建议吗？或者用渐变填充贝塞尔曲线下的空间的替代方法？

我尝试销毁曲线对象，希望将其从内存中释放，但没有效果。

Answer 1

这可能与我遇到的问题有关。我刚刚在 github 上创建了一个问题。欢迎查看：https://github.com/pixijs/pixijs/issues/10936