PixiJS Positioning

Attributes

• position, rotation, scale, pivot, anchor
• rotation - Z-rotation in radians
• pivot - origin of the object in px
  • rotation is always measured around the origin
  • scale doesn't affect the pivot
• anchor - relative origin of the object (only for Sprites)
• stage - root element of the scene graph
• getBounds() - retrieves the bounds of an object, can be used to check where the object is
• toGlobal() - calculates the global position
• toLocal() - calculates the local position relative to another point

note

the scale of the parent affects the units of its children

Examples

• positioning of a single element

---

• rotation is around the origin/pivot, which is by default in the top-left corner

---

• pivot also affects the offset of the location of the object

---

• having the pivot in the center, we can rotate the object around its center

---

• the scale of parent objects affects the units of their children

---

• same values, yet the squares are independent

---

• the green and the blue square are children of the red square