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);

Answer 2

The pivot property is a bit confusing. Imagine the following example: Your pivot is a screw located somewhere on the object (it can be of course also located somewhere outside, but just for better understanding imagine that your object is a plank of wood with a screw sticking out). Your position (of the graphics/container) is a screw. The object is always rotating around the position, but you can change the pivot (the position of the screw on your plank of wood) on the object, so it will be the new point of the rotation for the object. Finally you can try to screw your plank of wood to the screw.

Basically, the default values of the position and pivot is 0. So if you have your object drawn for example here:

test.drawRoundedRect(100, 100, 200, 200,12);

you can now try to rotate it and you'll see, that it is rotating around the point (0,0).

The graphic is always rotating around the position, you can try to locate it somewhere else:

test.position.x = 200;
test.position.y = 200;

The object is now rotating around the point (200,200). But that's just a shift. We can now try to change the pivot point (which is the screw) to any different position. So, on your plank of wood you just place the screw on (50,50), then (100,100), etc and you'll see that it affects your object position.

Now, for our example, we can set the pivot point to (200,200) to the same coordinates as the position of the object.

test.pivot.x = 200;
test.pivot.y = 200;

And finally it is rotating around the center point of the drawn object.

The solution provided by @Spencer is an alternative of the pivot property.