The pixi.js element affects the position of the object

Question

I have a question regarding the pivot property of a DisplayObject. In particular, I want to rotate the DisplayObjectContainer around its center; therefore, I set the axis of rotation to its center point. However, I noticed that this affects the position of the element.

For example, if I set the position to 0.0 (which is the default default), pixijs will try to position the object according to its center point, and not in the upper left corner. Thus, the children from DisplayObjectContainer (which in my case is an instance of the Graphics class) end from the main viewport.

Is there a way to set the pivot point, but still position the object relative to its upper left corner.

Answer 1

You need to draw a graphic container at the point where you want your object to rotate around, and then draw the object so that its center is the graphic position x / y. Thus, to draw a rectangle that is drawn in the exact coordinates that you want, turning around its center, you should 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 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 is a square or a rectangle, we can calculate where its center should be on the screen using x1 + (width / 2) and y1 + (height / 2), then we move the rectangle left and up half its width and half its heights using drawRect (- (width / 2), - (height / 2), x2, y2);

Answer 2

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

In principle, the default values ​​and the rotation axis are 0. Therefore, if you have your object, for example, here:

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

Now you can try to rotate it, and you will see that it rotates around the point (0,0).

Graphics always revolve around a position; you can try to find it somewhere else:

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

Now the object rotates around a point (200,200). But this is only a shift. Now we can try to change the pivot point (which is the fork) to any other position. So, on a wooden board, you just place a screw (50.50), then (100,100), etc., and you will see that it affects the position of your object.

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

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

And finally, it rotates around the center point of the drawn object.

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