Map sprite inside container with pixi-projection

[mik12345]

Good morning,
I have a question about a problem I have with pixi-projection, I'm using pixi V4.8.5 so the pixi-projection build is 2.0.8.

Originally I have a vertical pixi container where I add inside the sprite of some letters and numbers as child like the image below:

Now I need to add a "stretch" effect just the top-left and bottom-left corner of the container like so:

Ideally the sprite inside should be stretched aswell to match the size increase on the left side.

I got a solution working that implied to apply to each sprite a map to kinda match the same angle applied by the stretch to obtain a similar effect.

See the code below:

this._numberContainer = new PIXI.projection.Container2d();

 

        for (let i = 0; i < MAX_NUM_DIGITS; i ++)

        {

 

            let numSprite = this.assets.getSprite("win_char_flat_0");

            numSprite.anchor.set(0, 0);

            numSprite.y +=100*i

 

           

            let w = numSprite.width;

            let h = numSprite.height;

 

            function createSquare(x, y) {

                var square = new PIXI.Sprite(PIXI.Texture.WHITE);

                square.tint = 0xff0000;

                square.anchor.set(0.5);

                square.position.set(x, y);

                square.alpha = 1;//0

                return square;

            }

           

            let squares = [

                createSquare(w - 105-25*i, h - 105),//top left

                createSquare(w + 150-25*i, h - 140-10*i),//top right

                createSquare(w + 150-25*i, h + 85-25*i),//bottom right

                createSquare(w - 105-25*i, h + 105)//bottom left

            ];

 

            let quad = squares.map((s) => {

                return s.position;

            });

           

 

            let numSpritePrespective = new PIXI.projection.Sprite2d(numSprite.texture)

            numSpritePrespective.anchor.set(0, 0);

 

            squares.forEach((s) =>{

                this._numberContainer.addChild(s);

            });

 

            this._numberContainer.addChild(numSpritePrespective);

       

            PIXI.app.ticker.add((delta) => {

                numSpritePrespective.proj.mapSprite(numSpritePrespective, quad);

            });

 

            numSpritePrespective.blendMode = PIXI.BLEND_MODES.SCREEN;

 

            this._numberContainer.addChild(numSpritePrespective);

        }

I was wondering if it was possible to apply the same effect just to the container instead of every sprite of it since it would be quite a lot simpler to maintain.