Canvas texture update resets vertexData

[Growch]

Hi!

I'm using pixi.js to distort a sprite by manipulating it's vertexData (Like Photoshop's perspective transform).

It's working! But I'm using a canvas texture as source, and as soon as I render the scene after updating the texture, the vertexData resets itself! I need to update the canvas because I'm rendering some animation on it.

Some of the code I'm using:

this.image = new PIXI.Sprite(PIXI.Texture.fromCanvas(canvas));

function render() {
	var self = this;
	this.image.texture.update(); //Everything works fine if I comment this line
	for (var i = 0; i < this.handlers.length; ++i) {
        //The handlers are some other sprites I'm using as control points
	    this.image.vertexData[i * 2] = this.handlers[i].position.x;
	    this.image.vertexData[(i * 2) + 1] = this.handlers[i].position.y;
	}
	this.renderer.render(this.stage);
	requestAnimationFrame(render);
}

render();

It there any way to prevent the vertexData to reset? Or is there a better way to achieve the same effect?

Thank you so much!

[xerver]

The vertexData of the sprite is calculated in the `calculateVertices` method: https://github.com/pixijs/pixi.js/blob/1be230f41665d5e8998249638f1cdab503273502/src/core/sprites/Sprite.js#L168

If you want to do custom vertex calculations, override this method in a child class and change the behavior:

class MySprite extends PIXI.Sprite {
    calculateVertices() {
        PIXI.Sprite.prototype.calculateVertices.call(this);

        // Custom logic to perform after normal vertex calculation
        // Or remove the call above to not even do normal calc, and just do your custom logic here.
    }
}