I have a memory problem with Fill Gradient on a Graphics object in Pixi. Whenever I fill my object as such:
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 stats show increasing Texture Count and the app crashes within minutes. Whenever I fill with just a solid color, the problem does not occur.
Any tips on how to achieve this? Or an alternate way to fill the space under the bezier curve with a gradient?
I tried to destroy the curve object with the hopes of freeing it from memory but with no effect.
This might be connected to the issue I’m experiencing. I’ve just created an issue on github. Feel free to have a look: https://github.com/pixijs/pixijs/issues/10936
Maybe you can give more context to the issue there, to assist the devs with reproducing the issue and finding similarities.