How to scale (flip) in the center pixi.js

Question

I'm looking to flip a DisplayObjectContainer in Pixi.js, from the center. I figured out that scaling to -1 works for the flip but I can't get it to do so from the center, like you can with using anchor for Sprites. I also found this link that explains what I'm trying to do in terms of WebGL, but of course I am trying to do this on a higher level with Pixi. Any ideas?

Thanks

Answer 1

I guess you have a few options, keeping it high-level. Hopefully one is suitable for your particular situation.

1: Flip the container and then offset the position:

container.scale.x *= -1;
container.position.x = centerX - container.scale.x * containerWidth / 2;

See this working example: http://codepen.io/ianmcgregor/pen/BmbHe

2: Center the content inside the DisplayObjectContainer:

var content = new PIXI.Sprite(texture);
content.position.x = 0 - content.width / 2;
container.addChild(content);

container.scale.x *= -1;

3: Use a Sprite in place of DisplayObjectContainer. The drawback of this approach is that it will need to have a texture.