Strange effect in pixi.js regarding Graphics object with pivot and rotation

Question

I am experiencing a strange effect in newer pixi.js versions. I have created a simple example that rotates a PIXI.Graphics object from an example to reproduce the problem. It seems that if I use a pivot point other than (0,0) in a Graphics object (I haven't tried it with anything else yet) than rotation does not work as expected. It works with pixi.js 1.3.0, but does not in 1.4.3 and 1.5.0. It should only rotate, but it also moves in the scene. Am I doing something wrong? I know I could transform the coordinates so the center would be the 0,0 point, but I don't want to do that for some reason (unless it is not possible any other way, of course).

The example:

var stage = new PIXI.Stage(0x66FF99);
var renderer = PIXI.autoDetectRenderer(400, 300, null, true);

document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );

var g = new PIXI.Graphics();
g.beginFill(0xddffdd);
g.lineStyle(1, 0, 1);
g.moveTo(0, 0);
g.lineTo(60, 60);
g.lineTo(0, 60);
g.endFill();

g.position.x = 200;
g.position.y = 150;
g.pivot.x = 30;
g.pivot.y = 30;
stage.addChild(g);

function animate() {
    requestAnimFrame( animate );
    g.rotation += 0.1;
    renderer.render(stage);
}

Two URL's to the test pages:

This works OK: http://dev.progit.info/static/test-1.3.0.html

This does not: http://dev.progit.info/static/test-1.4.3.html

Answer 1

Found the bug by comparing tags 1.4.3 to 1.5.0. Looks like when the matrix transform operations were re-written a minus turned into a plus by accident.

On lines 409 and 410 of DisplayObject.js change them from:

a02 = this.position.x + a00 * px - py * a01,
a12 = this.position.y + a11 * py - px * a10,

to:

a02 = this.position.x - a00 * px - py * a01,
a12 = this.position.y - a11 * py - px * a10,

and it starts working as expected again.

I'll file an issue in Github