pixi.js pivot affects object position

Question

I have a question with regards to the pivot property of a DisplayObject. In particular, i want to rotate a DisplayObjectContainer around its center; so i set the pivot to its center point. However, i've noticed that this affects the position of the element.

For example, if i set the position to 0,0 (which is the default one) pixijs will try to position the object according to its center point and not the top left corner. So the children of the the DisplayObjectContainer (which in my case is an instance of the Graphics class) run out of the main viewport.

Is there any way to set the rotation point but still position the object in respect to its top left corner.

Answer 1

You need to draw the graphics container at the point at which you wish your object to rotate around and then draw the object so that its center is the graphic's x/y position. So, to draw a rectangle that is drawn at the precise coordinates you wish while pivoting around its center, you would use this function.

self.createRect = function (x1, y1, x2, y2, color) {
    var graphics = new PIXI.Graphics();

    graphics.beginFill(color || 0x000000);
    //This is the point around which the object will rotate.
    graphics.position.x = x1 + (x2/2);
    graphics.position.y = y1 + (y2/2);

    // draw a rectangle at -width/2 and -height/2. The rectangle's top-left corner will
    // be at position x1/y1
    graphics.drawRect(-(x2/2), -(y2/2), x2, y2);

    self.stage.addChild(graphics);

    return graphics;
};

Since it's a square or rectangle, we can calculate where its center should be on the screen by using x1 + (width/2) and y1 + (height/2) then we offset the rect to the left and to the top by half of its width and half of its height using drawRect(-(width/2), -(height/2), x2, y2);